ダーク/ライトモード切り替え

テーマコンポーネント
,
163

このテーマコンポーネント（ダークモードに切り替えるトグルを追加するもの）に関する質問ですか、それとも一般的なダークカラーパレットの検出に関する質問ですか？

dark-light-choose があります。

「いいね！」 2
164

ご協力ありがとうございます。
このダーク/ライトモードトグルコンポーネントを使用しています。

私の質問は、どのモードにいるかを検出し、背景画像を切り替えることについてです。これにより、ライトモード用の画像とダークモード用の画像をそれぞれ設定できます。

投稿されたリンクとこちらのリンクも参考にしました。

こちらの方が少し詳しく説明されていますが、うまくいきませんでした。テーマに画像ファイル（JPG）の $bg-light と $bg-dark を追加しようとしました。

image
image352×268 9.78 KB

また、その投稿のコードを color_definitions.scss という名前のスタイルシートにテーマとして追加しようとしました。

$bg: url(dark-light-choose($bg-light, $bg-dark));

:root {
  --custom-bg: #{$bg};
}

GitHubでテーマも作成しました。

言ったように、少し迷ってしまって申し訳ありません。
新しいトピックを開始すべきであれば、どのカテゴリに配置すればよいか教えてください。
ご協力ありがとうございます。

「いいね！」 1
165

必要であれば、モデレーターが投稿を#devの新しいトピックに移動できます。あなたの問題がテーマコンポーネントに直接関係しているのではなく、ブラウザやデバイスの設定でダークモードを有効にした場合にも発生するかどうかを確認したかっただけです。

かなり近づいていると思います。気づいたことの1つは、url()を2回使用していることです。

「いいね！」 1
166

私の問題は、テーマコンポーネントとは全く関係ありません。
ご協力ありがとうございました。ノイズになってすみません :blush:

わぁ…誰にも言わないでください。それが2つの背景をブレンドするための私の秘訣です。最初のものが次のものより優先されます。そのため、最初のものは半透明の線形グラデーションで、もう一つは静止画像です :wink: :sunglasses:

効果の実行例を以下に示します。

image
image645×486 46.9 KB

167

2つの背景を使用していると理解しました。

background-image: linear-gradient(to top, white, 15%, transparent), url(var(--custom-bg));

しかし、url(var(--custom-bg)) と --custom-bg: #{$bg}; および $bg: url(dark-light-choose($bg-light, $bg-dark)); の組み合わせは、url(url(dark-light-choose($bg-light, $bg-dark))) のようなものなのではないでしょうか？

「いいね！」 3
168

コアにダーク/ライトモードトグルが追加されたため、このテーマコンポーネントは非推奨になりました。詳細については、以下の発表をご覧ください。

「いいね！」 5