GitHub user dosubot[bot] added a comment to the discussion: Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset?
<!-- Answer --> Superset does not currently expose any CSS hooks, variables, attributes, or class names in the DOM that indicate the active theme (light/dark) for use in custom or external CSS. Theme state is managed internally via a Theme class and ThemeController, using an `algorithm` property and localStorage, but this is not accessible to CSS selectors outside the React/Emotion/Ant Design theming system ([Theme.tsx](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx), [ThemeController.tsx](https://github.com/apache/superset/blob/master/superset-frontend/src/theme/ThemeController.tsx)). A common workaround is to use CSS media queries like `prefers-color-scheme: dark`, but this only works if the user's system preference matches the Superset theme mode ([PR #35129](https://github.com/apache/superset/pull/35129)). There are no documented plans or open issues to expose theme indicators for custom/external CSS in future versions. If you need conditional styling, you could use JavaScript to read the theme mode from localStorage (e.g., `superset-theme-mode`) and add a class to the `<body>` or `<html>` element, but this is not officially supported and would require custom scripting. For now, best practice is to use Superset's theme configuration and tokens, or rely on system-level media queries where possible. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/aa13efdb-6916-4b2d-87e8-587cc75043d3?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/aa13efdb-6916-4b2d-87e8-587cc75043d3?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/aa13efdb-6916-4b2d-87e8-587cc75043d3?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/aa13efdb-6916-4b2d-87e8-587cc75043d3?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/aa13efdb-6916-4b2d-87e8-587cc75043d3?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/aa13efdb-6916-4b2d-87e8-587cc75043d3?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/aa13efdb-6916-4b2d-87e8-587cc75043d3?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%20does%20not%20currently%20expose%20any%20CSS%20hooks%2C%20variables%2C%20attributes%2C%20or%20class%20names%20in%20the%20DOM%20that%20indicate%20the%20active%20theme%20%28light/dark%29%20for%20use%20in%20custom%20or%20external%20CSS.%20Theme%20state%20is%20managed%20internally%20via%20a%20Theme%20class%20and%20ThemeController%2C%20using%20an%20%60algorithm%60%20property%20and%20localStorage%2C%20but%20this%20is%20not%20accessible%20to%20CSS%20selectors%20outside%20the%20React/Emotion/Ant%20Design%20theming%20system%C2%A0%28%5BTheme.tsx%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx%29%2C%20%5BThemeController.tsx%5D%28https%3A//github.com/apache/superset/blob/master/supers et-frontend/src/theme/ThemeController.tsx%29%29.%0A%0AA%20common%20workaround%20is%20to%20use%20CSS%20media%20queries%20like%20%60prefers-color-scheme%3A%20dark%60%2C%20but%20this%20only%20works%20if%20the%20user%27s%20system%20preference%20matches%20the%20Superset%20theme%20mode%C2%A0%28%5BPR%20%2335129%5D%28https%3A//github.com/apache/superset/pull/35129%29%29.%20There%20are%20no%20documented%20plans%20or%20open%20issues%20to%20expose%20theme%20indicators%20for%20custom/external%20CSS%20in%20future%20versions.%0A%0AIf%20you%20need%20conditional%20styling%2C%20you%20could%20use%20JavaScript%20to%20read%20the%20theme%20mode%20from%20localStorage%20%28e.g.%2C%20%60superset-theme-mode%60%29%20and%20add%20a%20class%20to%20the%20%60%3Cbody%3E%60%20or%20%60%3Chtml%3E%60%20element%2C%20but%20this%20is%20not%20officially%20supported%20and%20would%20require%20custom%20scripting.%20For%20now%2C%20best%20practice%20is%20to%20use%20Superset%27s%20theme%20configuration%20and%20tokens%2C%20or%20 rely%20on%20system-level%20media%20queries%20where%20possible.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37035) GitHub link: https://github.com/apache/superset/discussions/37035#discussioncomment-15468498 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
