Is this still the solution for checking for dark mode?

david · February 20, 2025, 5:31pm

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 <LightDarkImg component like this:

app/assets/javascripts/discourse/app/components/category-logo.gjs

a26138b50


      
          const CategoryLogo = <template>
            <div class="category-logo aspect-image">
              <LightDarkImg
                @lightImg={{@category.uploaded_logo}}
                @darkImg={{@category.uploaded_logo_dark}}
              />
            </div>
          </template>;

Topic		Replies	Views
No specific class for dark mode Dev css	5	685	March 15, 2023
How to add a specific body class for the dark (or light) mode? Support	13	3382	March 7, 2022
How to control if a color scheme gets the dark or the light logo? Support	16	1191	August 26, 2023
Is there a way to detect dark mode usage? Dev	4	1643	April 16, 2023
Different logos for light/black theme? Support	13	5638	April 29, 2022

Is this still the solution for checking for dark mode?

Related topics