# Is this still the solution for checking for dark mode? **URL:** https://meta.discourse.org/t/is-this-still-the-solution-for-checking-for-dark-mode/353354 **Category:** Development **Created:** [February 20, 2025, 3:56pm UTC](https://meta.discourse.org/t/is-this-still-the-solution-for-checking-for-dark-mode/353354 "2025-02-20T15:56:12Z") **Posts on this page:** 5 **Page:** 1
### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman) #### Post date: [February 20, 2025, 3:56pm UTC](https://meta.discourse.org/t/is-this-still-the-solution-for-checking-for-dark-mode/353354/1 "2025-02-20T15:56:12Z")
Continuing the discussion from [No specific class for dark mode](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/2): > [@No specific class for dark mode](https://meta.discourse.org/t/no-specific-class-for-dark-mode/254984/2): > > Would this accomplish what you need? this would need to be added to `color_definitions.scss` > > ```plaintext > @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. I’ve got a theme component that’s changing the site logo based on what category the user is in and adding logos to the categories in the sidebar, and now they want to change to a different logo in dark mode. Something like this: ```plaintext .category-my-other-identity #site-logo { content: url($AS) !important; display: inline-block; height: $site-logo-height; font-size: 0; margin-top: $site-margin-top; margin-bottom: $site-margin-bottom; } ``` I’m terrible at CSS, but it would seem like it would be much easier if there were a “this-is-dark-mode” class. Or maybe something like the above can work. Or maybe if this were a “real” theme-component with settings (right now it’s just hand coded like above), then it would be easy enough to stick those settings in the CSS. This seems like what I should probably do anyway, right? ---
### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david) #### Post date: [February 20, 2025, 5:31pm UTC](https://meta.discourse.org/t/is-this-still-the-solution-for-checking-for-dark-mode/353354/2 "2025-02-20T17:31:18Z")
Coincidently, this is something we’ve been discussing internally this week! Couple of proof-of-concept PRs are here: - [DEV: Introduce `html.dark-mode` and `html.light-mode` classes by davidtaylorhq · Pull Request #31397 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/31397) - [DEV: Add reactive helpers to `interfaceColor` service by davidtaylorhq · Pull Request #31415 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/31415) Note these are just experiments to help with our thinking - there’s no guarantee either will be merged. As for ‘right now’, the best bet is probably to use the ` ---
### Author: ![Cricket](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cricket/32/489800_2.png) [@Cricket](https://meta.discourse.org/u/Cricket) #### Post date: [February 20, 2025, 5:36pm UTC](https://meta.discourse.org/t/is-this-still-the-solution-for-checking-for-dark-mode/353354/3 "2025-02-20T17:36:34Z")
That makes sense. I had the same issue once but @david, that would’ve worked for me. Also, would badge granting difficulties be considered a bug or something else? ---
### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot) #### Post date: [February 20, 2025, 6:29pm UTC](https://meta.discourse.org/t/is-this-still-the-solution-for-checking-for-dark-mode/353354/4 "2025-02-20T18:29:06Z")
> [@Cricket](#): > > Also, would badge granting difficulties be considered a bug or something else? Could be a bug, but we’d need more detail to know one way or the other — it’s also unrelated to this topic, so your best bet would be to search for the issue, and if you can’t find an answer start a new topic walking through what you’re trying and where it’s failing. ---
### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@Alteras](https://meta.discourse.org/u/Alteras) #### Post date: [February 20, 2025, 6:46pm UTC](https://meta.discourse.org/t/is-this-still-the-solution-for-checking-for-dark-mode/353354/5 "2025-02-20T18:46:26Z")
A pure CSS solution would probably use the `--scheme-type` CSS variable, or even the `color-scheme` property that was added a few hours ago (woo!), with [`@container` style queries](https://developer.mozilla.org/en-US/docs/Web/CSS/@container#container_style_queries) or [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark). > Unfortunately `light-dark()` only works with color values. You might be able to use `@container` style queries targeting the `color-scheme` property (firefox doesn’t support style queries for custom properties yet). Haven’t been able to test the idea as my dev env is currently down. Having a dedicated `.dark-mode` or `.light-mode` class on the root would definitely be the easiest to work with.