# ダーク/ライトモードの切り替え
**URL:** https://meta.discourse.org/t/dark-light-mode-toggle/215585
**Category:** Theme component
**Tags:** deprecated, dark-mode-toggle
**Created:** [2022 年 1 月 21 日午後 6:50 UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585 "2022-01-21T18:50:36Z")
**Posts on this page:** 6
**Page:** 8
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2024 年 12 月 28 日午後 7:54 UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/163 "2024-12-28T19:54:25Z")
このテーマコンポーネント（ダークモードに切り替えるトグルを追加するもの）に関する質問ですか、それとも一般的なダークカラーパレットの検出に関する質問ですか？
`dark-light-choose` があります。
> [@Update themes and plugins to support automatic dark mode](https://meta.discourse.org/t/update-themes-and-plugins-to-support-automatic-dark-mode/161595/5?u=moin):
>
> 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…
---
### Author:  [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [2024 年 12 月 28 日午後 8:17 UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/164 "2024-12-28T20:17:29Z")
ご協力ありがとうございます。
このダーク/ライトモードトグルコンポーネントを使用しています。
> [@Moin](#):
>
> このテーマコンポーネントについて質問していますか。これはダークモードに切り替えるトグルを追加するものですが、それとも一般的にダークカラーパレットを検出することについてですか？
私の質問は、どのモードにいるかを検出し、背景画像を切り替えることについてです。これにより、ライトモード用の画像とダークモード用の画像をそれぞれ設定できます。
投稿されたリンクとこちらのリンクも参考にしました。
> [@Different CSS changes for different color schemes](https://meta.discourse.org/t/different-css-changes-for-different-color-schemes/282436/4?u=andrew_rowe):
>
> If I understand the issue well, there’s a specific thing to do for this. I’ve been working on a guide about this, but I’m struggling a bit to merge information so it’s clear enough to directly use the information in a theme, but still explains underlying technical stuff. To explain how to do it the most clearly as I can… I suggest you create a theme locally (using [Install the Discourse Theme CLI console app to help you build themes](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950) will help). Then, create a common/color\_definitions.scss …
こちらの方が少し詳しく説明されていますが、うまくいきませんでした。テーマに画像ファイル（JPG）の `$bg-light` と `$bg-dark` を追加しようとしました。
また、その投稿のコードを `color_definitions.scss` という名前のスタイルシートにテーマとして追加しようとしました。
```plaintext
$bg: url(dark-light-choose($bg-light, $bg-dark));
:root {
--custom-bg: #{$bg};
}
```
GitHubでテーマも作成しました。
> **[GitHub - MyRaceData/WebsiteTheme](https://github.com/MyRaceData/WebsiteTheme)**
>
> Contribute to MyRaceData/WebsiteTheme development by creating an account on GitHub.
言ったように、少し迷ってしまって申し訳ありません。
新しいトピックを開始すべきであれば、どのカテゴリに配置すればよいか教えてください。
ご協力ありがとうございます。
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2024 年 12 月 28 日午後 9:31 UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/165 "2024-12-28T21:31:02Z")
> [@Andrew\_Rowe](#):
>
> もし新しいトピックを開始すべきであれば、どのカテゴリに入れるか教えてください。
必要であれば、モデレーターが投稿を#devの新しいトピックに移動できます。あなたの問題がテーマコンポーネントに直接関係しているのではなく、ブラウザやデバイスの設定でダークモードを有効にした場合にも発生するかどうかを確認したかっただけです。
かなり近づいていると思います。気づいたことの1つは、`url()`を2回使用していることです。
>
>
---
### Author:  [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### Post date: [2025 年 1 月 4 日午後 8:03 UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/166 "2025-01-04T20:03:31Z")
私の問題は、テーマコンポーネントとは全く関係ありません。
ご協力ありがとうございました。ノイズになってすみません 😊
> [@Moin](#):
>
> 気づいたことの一つは、`url()` を2回使用していることです。
わぁ…誰にも言わないでください。それが2つの背景をブレンドするための私の秘訣です。最初のものが次のものより優先されます。そのため、最初のものは半透明の線形グラデーションで、もう一つは静止画像です 😉 🕶
効果の実行例を以下に示します。
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2025 年 1 月 4 日午後 8:28 UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/167 "2025-01-04T20:28:39Z")
2つの背景を使用していると理解しました。
```plaintext
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)))` のようなものなのではないでしょうか？
---
### Author:  [@Osama](https://meta.discourse.org/u/Osama)
#### Post date: [2025 年 2 月 7 日午前 2:32 UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/168 "2025-02-07T02:32:46Z")
コアにダーク/ライトモードトグルが追加されたため、このテーマコンポーネントは非推奨になりました。詳細については、以下の発表をご覧ください。
> [@Dark/light mode toggle now available in core](https://meta.discourse.org/t/dark-light-mode-toggle-now-available-in-core/350991?u=osama):
>
> The [Dark/Light Mode Toggle](https://meta.discourse.org/t/dark-light-mode-toggle/215585) theme component, which adds a toggle to allow users to easily switch between light and dark modes, has been merged into Discourse core and it can be enabled via the interface color selector site setting. In addition to various bug fixes and improvements, the core version differs slightly from the original theme component in that it has a third “Auto” option which makes the site’s color mode match the system preference of the user’s device. The color selector can be c…
[Previous page](https://meta.discourse.org/t/dark-light-mode-toggle/215585.md?page=7)