異なるカラースキームのための異なるCSS変更

開発
1

こんにちは！

これまでの理解では、CSS の変更はライトモードとダークモードの両方に適用されるようですが、これはあまり理にかなっていません。

最近、この問題に対処しなければなりませんでした。ダークモードでは、ラップされたテキストがラッパーと同じ色に見え、CSS で変更すると、ライトテーマのラップされたテキストも変更されてしまいますが、それは望ましくありません。

image
image318×244 5.52 KB

色スキームごとに CSS を変更するにはどうすればよいですか？

「いいね！」 1
2

フォーラムのスタイルガイド /styleguide/atoms/colors で利用可能なカラー変数（例：var(--primary-very-low), var(--secondary-low)）を使用すると、ダークモードとライトモードはそれぞれ異なる変数を尊重します（ダークモードとライトモードの切り替えに使用している2つのカラーパレットでも確認できます）。管理設定で styleguide enabled 設定を有効にする必要があります。また、管理者のみに制限する styleguide admin only 設定もあります。

「いいね！」 2
3

問題は、スタイルガイドで設定された色変数（/styleguide/atoms/colorsからはアクセスできませんでしたが）を尊重しない変更をすでに加えてしまったことです。変数を参照せずに、それを行う方法はありますか？

4

もし私が問題を正しく理解しているのであれば、これには特別な対処法があります。

私はこれに関するガイドを作成してきましたが、テーマに直接情報を適用できるように情報を統合するのが少し難しく、それでも根本的な技術的な内容を説明しています。

それを最も明確に説明するために…

ローカルでテーマを作成することをお勧めします（Install the Discourse Theme CLI console app to help you build themes が役立ちます）。
次に、テーマ内に common/color_definitions.scss ファイルを作成し、次のように記述します。

$my-color: dark-light-choose(#FC3468, #FF93AC);

:root {
  --my-color: #{$my-color};
}

次に、common/common.scss で、次のように変数を使用できます。

h1 {
  color: var(--my-color);
}

これにより、ダークモードまたはライトモードのときに自動的に正しい色が選択されます。

「いいね！」 3