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

[Canapin (Coin-coin le Canapin)]

@Renato_Mendes

私がこれまでに理解した限りでは、CSSの変更はライトモードとダークモードの両方に適用されており、あまり意味がありません。

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

Update themes and plugins to support automatic dark mode

Great question, I tried this and noticed that we didn’t properly support using background images or theme variables in the special color definitions stylesheet. So I made some fixes in core, and you should be able to do this now (make sure you pull the latest core). So, if you have two images in your theme or theme component, with SCSS vars of $bg-light and $bg-dark respectively, you can add this to your color_definitions.scss stylesheet: $bg: url(dark-light-choose($bg-light, $bg-dark)); :ro…

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

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

ローカルでテーマを作成することをお勧めします（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);
}

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