# ダーク（またはライト）モードに特定のbodyクラスを追加する方法は？
**URL:** https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062
**Category:** Support
**Created:** [2022 年 3 月 4 日午後 2:30 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062 "2022-03-04T14:30:29Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022 年 3 月 4 日午後 2:30 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/1 "2022-03-04T14:30:30Z")
現在、特定のクラスは存在しないようです。
[こちら](https://meta.discourse.org/t/add-currentthemeid-into-body-css-classes/161380/2?u=canapin) を見つけましたが、ダークモードとライトモードでテーマIDが同じであるため（おそらくカラースキームで定義されている）、機能しません。
短いスクリプトで解決できるでしょうか？そして、これをDiscourseのコアに追加することは可能でしょうか？
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2022 年 3 月 4 日午後 3:02 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/2 "2022-03-04T15:02:43Z")
`dark`または`light`モードのためにbodyに特定のクラスを追加する必要がある理由を説明していただけますか？
このコア機能では、必要なことができないのでしょうか？
> [@Automatic Dark Mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593):
>
> You can now set up your Discourse site to automatically switch color schemes when the user’s device is in dark mode. For a quick preview, head over to the [try.discourse.org](http://try.discourse.org) instance and toggle your device’s dark mode on and off to see this new feature in action. (This feature not enabled on meta.) Enabling automatic dark mode To enable this feature on your instance, you can pick the dark mode color scheme in your site settings: Once that setting is set, you can reload your site with …
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022 年 3 月 4 日午後 3:13 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/3 "2022-03-04T15:13:23Z")
フォーラムのスタッフが、この特定のかすかな茶色を生成する生成されたカラー変数（`--tertiary-very-low`）を気に入っていません。
彼らはそれを調整したいのですが、生成されたものであり、ダークモード用の親固有のクラスがないため、実際には変更できないようです。
しかし、この情報を見つけました。
> [@$primary-medium SCSS variable problems](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390/5?u=canapin):
>
> We stumbled onto this thread because of a similar issue, we solved it with a workaround by adding the following to the theme’s common css: :root { --primary-medium: #666666; }
それが有効かどうかはわかりません。まだ試すことができませんでした。今はやることが多すぎます:sweat\_smile:。しかし、それが機能すれば、それで十分です。実際、さらに良くなるでしょう。
---
### Author:  [@pierrox](https://meta.discourse.org/u/pierrox)
#### Post date: [2022 年 3 月 4 日午後 4:30 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/4 "2022-03-04T16:30:17Z")
フォーラムの調整を @Canapin さんと一緒に行っているので、ここでは「私たち」と言わせてください。Discourse のフランス語版にある「Café crème」というプリセットを使用してダークテーマを作成しました（「coffee」だと思います）。そして、❤ の色を茶色ではなく赤に変更しました。
このテーマの奇妙な点は、ハイパーリンクの色がテキストとほとんど同じであることです。
そのため、埋め込みリンクの場合、ほとんど見えません。
（はい、最後の2単語「cliquez-ici」はウェブページへのリンクです…）
そこで、リンクを少し茶色にして目立たせようと考えました。しかし、カラーパレットの `quaternary` 設定を変更すると、多くの色が一緒に変わってしまいます。DM の後ろにある「バブル」の背景が、@Canapin さんの最初のメッセージに示されている茶色よりも、鳥の糞に近い色に変わってしまいます。一番上のメッセージボックス（「送信メールが無効になりました」ボックス）も、この同じ鳥の糞のような色に変わってしまいます。
そこで、最初に `css` を使用してハイパーリンクの色を変更しようと考えましたが、まだ方法がわかりません。
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2022 年 3 月 4 日午後 4:46 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/5 "2022-03-04T16:46:55Z")
これらのリンクにカスタムカラーを設定するには、CSSターゲットとして`.cooked a`を使用すると、うまくいくはずです。
コアシステムでは、ダーク/ライトカラーモードに対応するカラーを選択できるようになりましたが、次のようにダーク/ライトモード用のCSSメディアクエリを使用することもできます。
> **[prefers-color-scheme - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme)**
>
> The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.
> A user indicates their preference through an operating system setting (e.g., light or dark mode) or a user agent setting.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022 年 3 月 5 日午後 3:31 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/6 "2022-03-05T15:31:16Z")
```css
@media (prefers-color-scheme: dark) {
.cooked a, .d-editor-preview a {
color: var(--primary-low-mid);
}
}
```
作業は完了しました。ありがとうございました！
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022 年 3 月 5 日午後 4:27 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/7 "2022-03-05T16:27:17Z")
おっと。
いや、うまくいきませんでした。
もし私が間違っていたら訂正してください。 **prefers-color-scheme** は、実際の Discourse の選択されたテーマではなく、_デバイス_ の設定に基づいていますか？
私の Windows デバイスでは、ダークテーマを設定しました。そのため、デバイスの設定を使用するウェブサイトは、可能であればダークテーマを表示します。
しかし、私のフォーラムでは、ダークテーマではなく、意図的に **ライト** テーマを使用することを選択しました。
ライトテーマを使用しているにもかかわらず、メディアクエリ **prefers-color-scheme** はロードされています。
ライトテーマ、ダークモードなし、
それでも、ダークテーマのルールが適用されています。
フルスクリーン：
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2022 年 3 月 7 日午後 3:48 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/8 "2022-03-07T15:48:03Z")
申し訳ありません。システム設定のダークモードをフォーラムで有効にするという意味だと誤解していました。
つまり、あなたは個人的にはライトカラースキームを使用していますが、ユーザーはダークカラースキームを使用しているということでしょうか？
以前のスクリーンショットではダークカラースキームが有効になっているように見えましたが、最近の返信ではライトカラースキームを使用していると述べられています。
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022 年 3 月 7 日午後 5:07 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/9 "2022-03-07T17:07:01Z")
こんにちは、すみません、特に同じ種類のものを異なる配色で2つ話していたので、明確ではありませんでした。また、私にとっては少し混乱しました。
それで、私の質問は次のようになります。Discourseでは、デバイスのダーク/ライトモードの設定に関係なく、どの配色を使用しているかを知るにはどうすればよいですか？
私の理解が正しければ：
私のデバイス（Windows 10）がダークモードに設定されていても、Discourseでライト配色を選択した場合、フォーラムのCSSにあるメディアクエリ **(prefers-color-scheme: dark)** は、いずれにしても「true」のようなものを返し、ネストされたルールが適用されます。これは、フォーラムでライト配色を選択した場合でも（Windowsがダークモードに設定されていても）同様です。
したがって、DiscourseのHTMLコードで、現在ライトまたはダーク配色を使用しているかどうかを知るにはどうすればよいですか？「light-color-scheme」や「dark-color-scheme」のような親クラスが見つかりませんでした。そのため、CSSで特定の配色を区別/ターゲットにして、一方または他方のみのルールを作成することはできません。
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2022 年 3 月 7 日午後 5:18 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/10 "2022-03-07T17:18:49Z")
明確にしていただきありがとうございます。理解しました。
> [@Canapin](#):
>
> では、Discourse の HTML コードで、現在ライトまたはダークのカラースキームを使用しているかどうかを知るにはどうすればよいですか？「light-color-scheme」や「dark-color-scheme」のような親クラスが見つかりませんでした。そのため、CSS で特定のカラースキームを区別/ターゲットにして、一方または他方のみのルールを作成することができません。
現在選択されているカラースキームに基づいて、ボディにクラスを追加することはありません。
さらに詳しくお伺いしてもよろしいでしょうか？現在選択されているダークスキームで、当社のカラー関数が `--tertiary` に対して生成する色がお気に召さないためでしょうか？
ボディクラスを通じて、現在達成できないと感じていることは何でしょうか？
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022 年 3 月 7 日午後 5:52 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/11 "2022-03-07T17:52:50Z")
> [@jordan.vidrine](#):
>
> ダークカラースキームで生成される `--tertiary` の色がお気に召さないためでしょうか？
はい、その通りです 🙂
> [@jordan.vidrine](#):
>
> 現在できないと感じていることを、ボディクラスを通じて達成したいことは何ですか？
この質問を読んでみると…生成された色を置き換える唯一の方法が、私の知る限りでは
```css
:root {
--primary-medium: #666666;
}
```
なのですが、ルートセレクターであるため、html要素やbody要素のクラスでは `:root` よりも前にカラースキームをターゲットにすることはできないからです。
なので…どうでしょう。
要するに、特定のカラースキームに対して、特定の生成色を変更したいということです。 🤷
もし不可能でも、大した問題ではありません。カラースキームの色についていくつか実験を行い、生成された色には現在十分に満足しています。 🙂 もっと良くできるかもしれませんが、大きな問題からは程遠いです。 🙂
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [2022 年 3 月 7 日午後 6:03 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/12 "2022-03-07T18:03:46Z")
必要であれば、一種の隠し回避策があります。
フォルダを作成し、その中にabout.jsonファイルのみを追加することができます。
私は実際に、組み込みのカラー関数に依存するのではなく、独自のバリアントを指定したかったため、`solarized light`カラーテーマを作成するためにこれを行いました。
以下は、私が作成した実際の`about.json`ファイルです。
その後、この「テーマ」をインストールすると、このカラーテーマがフォーラムにインストールされます。その時点で、他のテーマでも利用できるようになります。
```json
{
"name": "Solarized Light",
"component": false,
"license_url": null,
"about_url": null,
"authors": null,
"theme_version": null,
"minimum_discourse_version": null,
"maximum_discourse_version": null,
"assets": {
},
"color_schemes": {
"Solarized Light": {
"primary": "002B36",
"primary-high": "4C6869",
"primary-medium": "7E918C",
"primary-low-mid": "A4AFA5",
"primary-low": "D6D8C7",
"primary-very-low": "F0ECD7",
"secondary": "FCF6E1",
"secondary-very-high": "E8E6D3",
"secondary-high": "97A59D",
"secondary-medium": "6C8280",
"secondary-low": "325458",
"tertiary": "0088cc",
"tertiary-high": "329ED0",
"tertiary-medium": "7EBFD7",
"tertiary-low": "D6E6DE",
"quaternary": "e45735",
"header_background": "FCF6E1",
"header_primary": "002B36",
"highlight": "ffff4d",
"highlight-high": "BCAA7F",
"highlight-medium": "E3D0A3",
"highlight-low": "FDF9AD",
"danger": "e45735",
"danger-low": "F8D9C2",
"success": "009900",
"success-medium": "4CB544",
"success-low": "CFE5B9",
"love": "fa6c8d",
"love-low": "FCDDD2"
}
},
"modifiers": {
},
"learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2022 年 3 月 7 日午後 6:14 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/13 "2022-03-07T18:14:11Z")
これは、Discourse のインストールをより深く行っていた、ずっと昔に見たことを覚えています！
間違いなく良い回避策です。ありがとうございます。少しハッキーかもしれませんが、それは適切な解決策と見なすことにします。
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [2022 年 4 月 6 日午後 6:14 UTC](https://meta.discourse.org/t/how-to-add-a-specific-body-class-for-the-dark-or-light-mode/220062/14 "2022-04-06T18:14:44Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.