これはダークモードをチェックするための解決策ですか？

開発
1

No specific class for dark mode からの議論の続きです。

ユーザーがいるカテゴリに基づいてサイトのロゴを変更し、サイドバーのカテゴリにロゴを追加するテーマコンポーネントがありますが、ダークモードでも別のロゴに変更したいとのことです。

以下のようなものになります。

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

私はCSSが苦手なのですが、「これはダークモードです」というクラスがあれば、もっと簡単になるのではないでしょうか。あるいは、上記のようなものでも機能するかもしれません。

あるいは、これが（今は上記のように手書きされていますが）「実際の」テーマコンポーネントで設定があれば、それらの設定をCSSに埋め込むのは簡単かもしれません。どちらにしても、これがやるべきことのように思えますね。

「いいね！」 6
2

偶然ですが、これは今週社内で話し合っていたことでもあります！概念実証のプルリクエスト（PR）がいくつかあります。

これらはあくまで検討に役立つ実験であり、どちらもマージされる保証はありません。

「現時点」では、おそらく次のように LightDarkImg コンポーネントを使用するのが最善でしょう。

「いいね！」 8
3

なるほど。私も以前同じような問題がありましたが、@david、それは私にはうまくいったでしょう。\nまた、バッジの付与に関する問題はバグかそれ以外か、どちらに分類されますか？

「いいね！」 2
4

バグの可能性もありますが、それを判断するには詳細が必要です。また、このトピックとは関係ありませんので、まずは問題を検索し、答えが見つからない場合は、試していることと失敗している箇所を説明する新しいトピックを開始するのが最善です。

「いいね！」 5
5

CSSのみのソリューションでは、おそらく--scheme-type CSS変数、あるいは数時間前に追加された（やった！）color-schemeプロパティを、@containerスタイルクエリまたはlight-dark()とともに使用することになるでしょう。

残念ながら、light-dark()は色値でのみ機能します。color-schemeプロパティをターゲットとする@containerスタイルクエリを使用できるかもしれません（Firefoxはまだカスタムプロパティのスタイルクエリをサポートしていません）。開発環境が現在ダウンしているため、このアイデアをテストすることはできませんでした。

ルートに専用の.dark-modeまたは.light-modeクラスがあれば、間違いなく最も扱いやすいでしょう。

「いいね！」 6