テーマのカスタマイズ

フロントエンドフレームワークは、シンプルなテーマサポートを備えたデザインシステムを提供しており、これによりアプリケーションの外観や操作感をカスタマイズする多くのケースに対応できます。

概要

フロントエンドフレームワークは、CSSモジュールを使用してスタイルシステムを実装しており、各コンポーネントごとに一意のクラス名が生成され、それぞれが独自のスタイルを管理します。そのため、クラス名を直接ターゲットにしてコンポーネントのスタイルを上書きすることはできません。

グローバルスタイルの場合、フロントエンドフレームワークは、すべてのデザインシステムコンポーネント間で共有されるCSS変数を使用しています。さらに、各デザインシステムコンポーネントにカスタムクラス名を指定し、独自のスタイルを適用することも可能です。

ページ全体に影響を与えるスタイルルールについては、使用しているReact環境に適した方法を使用してください。

私たちが提供するGeekleなどのPapplicaアプリケーションでは、これはViteアプリケーションであり、グローバルCSSはsrcディレクトリ内のcore-styles.cssファイルに追加できます。

フロントエンドフレームワークは、すべてのデザインシステムコンポーネントで共有されるランタイムCSS変数を使用しています。アプリケーションテンプレートには、これらの変数の上書きを指定できる theme.variables プロパティが提供されています。

{
  ...
  theme: {
    variables: {
      ...
      '--color-primary-100': 'red',
      ...
    }
  }
}

上書き可能な変数の全リストは、フロントエンドフレームワークパッケージ内の Theme インターフェースのTSDocで確認できます。

theme.variables プロパティはアプリの起動時にこれらのプロパティを上書きしますが、JavaScriptの document.documentElement.style.setProperty メソッドを使用してランタイムでこれらの変数を変更することも可能です。

document.documentElement.style.setProperty('--color-primary-100', 'red');

各デザインシステムコンポーネントについて、デフォルトのクラス名に加えて使用されるカスタムクラス名を指定することができます。これは、theme.classes プロパティを指定することで実行できます。

{
  ...
  theme: {
    classes: {
      ...
      button: 'my-custom-button-class',
      ...
    }
  }
}

これを使用して、アプリケーション全体でデザインシステムコンポーネントにカスタムスタイルを適用します。

theme は、デザインシステムに必要な他の設定を指定するために configs プロパティもサポートしています。現在、サポートされている唯一の設定は timezone で、これによりUI内の日付が表示されるタイムゾーンを設定できます。

{
  ...
  theme: {
    configs: {
      timezone: 'Asia/Tokyo'
    }
  }
}