Continuing the discussion from No specific class for dark mode: [image]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. 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: .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?

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 DEV: Add reactive helpers to `interfaceColor` service by davidtaylorhq · Pull Request #31415 · discourse/discourse · GitHub 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 ;

[image] 📚 The Professor of Pyrrhia: 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.

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 or light-dark(). app/assets/stylesheets/color_definitions.scss 834ea70b1 color-scheme: #{schemeType()}; --scheme-type: #{schemeType()}; 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.

Is this still the solution for checking for dark mode?

Development

Cricket (📚 The Professor of Pyrrhia) February 20, 2025, 5:36pm 3

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?

Topic		Replies	Views
How to add a specific body class for the dark (or light) mode? Product Support	12	4041	March 7, 2022
Is there a way to detect dark mode usage? Development	3	1838	April 16, 2023
No specific class for dark mode Development css	4	897	February 13, 2023
How to change css item based on dark or light mode? Development	11	2624	June 18, 2023
How to control if a color scheme gets the dark or the light logo? Product Support	16	1886	August 26, 2023

Is this still the solution for checking for dark mode?

Related topics