ダークモードの使用を検出する方法はありますか？

[ti0]

現在のテーマがダークモードを使用しているかどうかをプラグイン/テーマコンポーネントで検出する方法はありますか？
または、アクティブなテーマIDを取得する方法はありますか？
それとも、ライトテーマとダークテーマで別々のテーマコンポーネントを作成する必要がありますか？

[Don]

@ti0

現在のテーマがダークモードを使用しているかどうかを検出する

こんにちは、

これを達成する方法はいくつかあると思います。

こちらをご利用いただけます。

No specific class for dark mode

Would this accomplish what you need? this would need to be added to color_definitions.scss @if #{schemeType()} == dark { body { background: red; } } @else { body { background: blue; } } A class does seem like it would be useful though, we can probably add one.

またはこちら

Why might dark-light-choose() not work?

I believe, due to the way the SCSS is compiled, custom dark/light definitions need to be added to color_definitions.scss within a theme and won’t work in other scss files. [Screen Shot 2020-12-04 at 9.54.13 PM] color_definitions.scss is high up in the cascade (before a lot of the default styles), so you don’t want to add the .modal.history-modal ins part there. Instead you can just add the color definition itself… $dark-theme-ins: #acf2bd; $light-theme-ins: #4da06d; $ins: dark-light-choose(…

---

Discourse Aiの関連トピックセクションが大好きです😃整理やトピックの検索がずっと簡単になります。

[Lilly (Lillian Louis)]

個人的には、テーマのダークモードとライトモードではなく、個別のダークテーマとライトテーマを用意する方が好みです。一部のユーザーはその追加のドロップダウンを混乱させるものだと考えていると思います。私はライトバージョンとダークバージョンのテーマを作成し、それらをハンバーガーメニューに入れていますが、ライブテーマは4つしかありません（ただし、特別なイベント限定テーマも作成しました。例えば、トーナメントのためにマスターズゴルフのライトとダークテーマがありました）。カラーパレットを管理するだけです。

[ti0]

各テーマのヘッダーセクションに、色に応じて1行のコードを追加することで解決しました。

document.body.classList.add(“dark-theme”);

document.body.classList.add(“light-theme”);

ご協力いただいた @Don @Lilly さん、ありがとうございました。