Is there a way to detect dark mode usage?

[ti0]

Is there a way in a plugin / theme component to detect if the current theme is using dark mode?
Alternately, is there a way to get the active theme ID?
Or should we create different theme components for light themes and dark themes?

[Don]

@ti0

detect if the current theme is using dark mode

Hello,

I think there are a few ways to achieve this.

You can use this

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.

Or this

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(…

---

Love the Discourse Ai Related Topics section so much easier to organize and find topics.

[Lilly]

personally i prefer having separate dark and light themes, rather than dark and light modes of a theme. i think some users find that extra drop down confusing. i just make light and dark version themes and put them in the hamburger menu, but i only have 4 live themes (i’ve done special event limited time themes though, for example we had Masters Golf light and dark themes for tournament). just have to keep track of the color pallettes.

[ti0]

I resolved this by adding a single line of code to the Head section of each theme depending on the colors:

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

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

Thanks for your inputs @Don @Lilly