ライトモードとダークモードのCSSを編集する正しい方法

コンテナクエリは機能しますが、これを簡素化するために、CSSのネイティブなlight-dark()関数を使用することもできます:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

一般的に、Discourseでは、このように特定の色を設定するのを避けるために、自動的に切り替わるカラー変数(--primary--secondaryなど)に依存しています。これにより、どのようなカラースキームでも色が正しく表示されます。

例はここで確認できます:https://meta.discourse.org/styleguide/atoms/colors 。ダークモードとライトモードを切り替えると、これらの変数がどのように変化するかを確認できます。これらの変数は、/admin/config/colorsのカラーパレットで設定されています。