ライト/ダークカラーカラースキーム以外の色の定義

こんにちは :wave:

Discourseでは、Light(ライト)とDark(ダーク)の2つのカラーテーマを扱うことができます。そのため、デバイスがダークモードに切り替わると、デフォルトではdefault dark mode color scheme idというサイト設定が使用されます。

Discourseには、よりカスタムカラーパレットを設定することもできます。

新しいカラーパレットは/admin/customize/colorsページで設定できます。

または

カスタムテーマを使用している場合、これらの設定をabout.jsonファイルで行うこともできます。
例えば、FKB Proテーマではこの方法を使用しています。

この場合、これらのカラーパレットが/admin/customize/colorsに追加されます。


これらのカラーパレットが追加されると、ユーザーはユーザー設定インターフェースページでそれらを選択できるようになります(有効化している場合)。


dark-light-choose()

dark-light-choose()関数は、Light/Darkの2つのカラーテーマしか扱うことができません。そのため、私はこの関数をデフォルトの値を上書きするためではなく、カスタムカラー変数を作成するために使用することをお勧めします。デフォルトのカラー変数を上書きするには、上記で示した方法を行ってください。

ユーザーがユーザー設定インターフェースページで、サイトのデフォルトであるLight/Darkとは異なるカラーパレットを設定した場合、そのユーザーはdark-light-choose()で作成したカラー変数を使用することになります。これは、すべてのLightまたはDarkのカラーテーマに対して適用されます。

これが私が以下の#customization:theme-componentを作成した理由の一つです。

このテーマコンポーネントでは、color-scheme="id"を個別にターゲットにすることができます。

そこで、あなたができることは以下の通りです :arrow_down_small:

カラーパレット(Light、Dim、Dark)を作成します。

上記のコンポーネントを使用して、Dim color-scheme="id"のカラーやその他の設定(必要に応じて)を変更します。