Is there a way to detect dark mode usage?

AI-generated summary

In a discussion about detecting dark mode usage in Discourse plugins or theme components, ti0 initially asked whether it’s possible to detect the current theme’s mode or retrieve the active theme ID, or if separate components should be created for light and dark themes. Don responded by sharing two relevant Meta Discourse threads offering solutions, and praised the AI-powered Related Topics feature. Lilly shared a preference for maintaining entirely separate light and dark themes rather than toggle modes, citing user confusion with dropdowns, and noted managing only four live themes with occasional event-specific ones. Finally, ti0 resolved the issue by manually adding a single line of JavaScript to each theme’s Head section — document.body.classList.add("dark-theme"); or "light-theme" — to explicitly tag the body class, thanking both Don and Lilly for their input. The thread highlights practical approaches for theme mode detection and preference-driven design choices in Discourse.

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?

Hello,

I think there are a few ways to achieve this.

You can use this

Or this


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

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.

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