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 the active theme (light/dark) on the `<body>` element via a `data-theme` attribute or theme-specific class—theme state is managed internally by React context providers and not surfaced in the DOM for CSS selectors [ThemeController.tsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/theme/ThemeController.tsx#L43-L246), [ThemeProvider.tsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/theme/ThemeProvider.tsx#L39-L93). Technically, it's straightforward to add this: the theme mode is available in `SupersetThemeProvider` and `RootContextProviders`, so you could use a React effect to set a `data-theme` attribute or class on `document.body` whenever the theme changes. This would keep external CSS in sync with the active theme. Both approaches (attribute or class) are common in web apps. Using a `data-theme` attribute is concise and aligns with modern CSS practices, while a class (like `superset-theme-dark`) is more extensible if you want to support multiple theme variants or legacy selectors. Either option would work; if you want simplicity and compatibility with CSS attribute selectors, `data-theme` is a good default. If you decide to propose this, consider opening a draft PR or discussion to get feedback from maintainers on their preferred approach before finalizing the implementation. The change would be low-risk and could be implemented in the top-level theme provider logic. <!-- 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/80889be3-ad88-4abd-afff-2aafb3204ff1?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/80889be3-ad88-4abd-afff-2aafb3204ff1?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/80889be3-ad88-4abd-afff-2aafb3204ff1?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/80889be3-ad88-4abd-afff-2aafb3204ff1?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/80889be3-ad88-4abd-afff-2aafb3204ff1?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/80889be3-ad88-4abd-afff-2aafb3204ff1?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/80889be3-ad88-4abd-afff-2aafb3204ff1?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%20the%20active%20theme%20%28light/dark%29%20on%20the%20%60%3Cbody%3E%60%20element%20via%20a%20%60data-theme%60%20attribute%20or%20theme-specific%20class%E2%80%94theme%20state%20is%20managed%20internally%20by%20React%20context%20providers%20and%20not%20surfaced%20in%20the%20DOM%20for%20CSS%20selectors%C2%A0%5BThemeController.tsx%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/theme/ThemeController.tsx%23L43-L246%29%2C%C2%A0%5BThemeProvider.tsx%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/theme/ThemeProvider.tsx%23L39-L93%29.%0A%0ATechnically%2C%20it%27s%20straightforward%20to%20add%20t his%3A%20the%20theme%20mode%20is%20available%20in%20%60SupersetThemeProvider%60%20and%20%60RootContextProviders%60%2C%20so%20you%20could%20use%20a%20React%20effect%20to%20set%20a%20%60data-theme%60%20attribute%20or%20class%20on%20%60document.body%60%20whenever%20the%20theme%20changes.%20This%20would%20keep%20external%20CSS%20in%20sync%20with%20the%20active%20theme.%0A%0ABoth%20approaches%20%28attribute%20or%20class%29%20are%20common%20in%20web%20apps.%20Using%20a%20%60data-theme%60%20attribute%20is%20concise%20and%20aligns%20with%20modern%20CSS%20practices%2C%20while%20a%20class%20%28like%20%60superset-theme-dark%60%29%20is%20more%20extensible%20if%20you%20want%20to%20support%20multiple%20theme%20variants%20or%20legacy%20selectors.%20Either%20option%20would%20work%3B%20if%20you%20want%20simplicity%20and%20compatibility%20with%20CSS%20attribute%20selectors%2C%20%60data-theme%60%20is%20a%20good%20default.%0A%0AIf%20you%20decide%20to%20propose%20this%2C%20consider%20opening%20a%20draft %20PR%20or%20discussion%20to%20get%20feedback%20from%20maintainers%20on%20their%20preferred%20approach%20before%20finalizing%20the%20implementation.%20The%20change%20would%20be%20low-risk%20and%20could%20be%20implemented%20in%20the%20top-level%20theme%20provider%20logic.) [](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-15468680 ---- 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]
