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

サポート
1

ライトモードとダークモードの両方に対応するために、大量のCSSを編集する必要があります。フォーラムには、これを行う確実な方法がないという投稿がいくつかあります。

ただし、これらの投稿の多くは古いものです。2026年現在、簡単な方法はあるのでしょうか？以下を試してみましたが、

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

これで正しいかどうかはわかりませんが、動作しています。

2

コンテナクエリは機能しますが、これを簡素化するために、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のカラーパレットで設定されています。

3

すばらしい、本当にありがとう、クリス。ちなみに、そのリンクは動作しません。