You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "VasilijeBursac (via GitHub)" <gi...@apache.org> on 2026/01/11 14:15:19 UTC
[D] Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset? [superset]
GitHub user VasilijeBursac created a discussion: Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset?
Hello everyone,
In Apache Superset we have the ability to define themes, which allow us to style the UI at a more general level, and also custom/external CSS, which gives us more granular control and enables more precise styling for specific UI elements that cannot be covered by themes alone.
**My question is whether there is any way, from custom external CSS, to detect which theme (or theme algorithm) is currently active, so that we could apply conditional styling based on that?**
I see practical use cases for this, especially when working with light (default) and dark themes. In some cases, custom CSS rules that look correct in the light theme may cause color conflicts or visual issues in the dark theme. Ideally, we would like to define separate CSS rules depending on whether the active theme is light or dark.
So my questions are:
- Does Superset currently expose any CSS hooks, variables, attributes, or class names that indicate the active theme and can be used for conditional styling?
- If not, is this something that is planned or being considered for future versions of Superset?
Any guidance, best practices, or workarounds would be greatly appreciated.
Thanks in advance! @mistercrunch @rusackas @msyavuz
GitHub link: https://github.com/apache/superset/discussions/37035
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset? [superset]
Posted by "VasilijeBursac (via GitHub)" <gi...@apache.org>.
GitHub user VasilijeBursac edited a comment on the discussion: Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset?
I gave this some thought and the idea I came up with is to expose the active theme on the `<body>` element (for example via a `data-theme="light|dark"` attribute or a theme-specific class) when theme changes. Would it make sense for Superset to expose the currently active theme (e.g. light/dark) on the `<body>` element, for example via a `data-theme="light|dark"` attribute or a theme-specific class?
This would allow custom/external CSS to conditionally apply styles based on the active theme, which is especially useful to avoid visual conflicts between light and dark themes when using custom CSS overrides. Short examples:
## Option 1. Adding `data-theme` attribute to `<body>` or `#root`
`<body data-theme="light">` or `<body data-theme="dark">`
Then external CSS can do:
```
body[data-theme="dark"] .my-custom-class {
background-color: #222;
}
body[data-theme="light"] .my-custom-class {
background-color: #fff;
}
```
## Option 2: Adding a theme-specific class to `<body>`:
`<body class="superset-theme-light superset-theme-default">` or `<body class="superset-theme-dark">`
CSS usage:
```
.superset-theme-dark .chart-container {
border-color: #444;
}
```
@mistercrunch @rusackas @msyavuz @dosu Is something like this currently available, and if not, would a PR implementing this be acceptable approach? Do you prefer the attribute or custom class approach?
GitHub link: https://github.com/apache/superset/discussions/37035#discussioncomment-15468642
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset? [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on 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?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=aa13efdb-6916-4b2d-87e8-587cc75043d3) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37035#discussioncomment-15468498
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset? [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
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 notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset? [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on 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?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=reply-with-mention&utm_term=apache%2Fsuperset).*
---
Docs are dead. Just use [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-tagline&utm_term=apache%2Fsuperset).
[](https://app.dosu.dev/response-feedback?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-feedback&utm_term=apache%2Fsuperset&message_id=80889be3-ad88-4abd-afff-2aafb3204ff1) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-ask-repo&utm_term=apache%2Fsuperset) [](https://app.dosu.dev/signup?referrer=openSource&source=github-footer&utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=static-docs-share-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37035#discussioncomment-15468680
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset? [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
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 notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org
Re: [D] Is it possible to detect the currently active theme/theme algorithm (light/dark) from custom/external CSS in Apache Superset? [superset]
Posted by "VasilijeBursac (via GitHub)" <gi...@apache.org>.
GitHub user VasilijeBursac 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?
I gave this some thought and the idea I came up with is to expose the active theme on the `<body>` element (for example via a` data-theme="light|dark"` attribute or a theme-specific class). Would it make sense for Superset to expose the currently active theme (e.g. light/dark) on the `<body>` element, for example via a `data-theme="light|dark"` attribute or a theme-specific class?
This would allow custom/external CSS to conditionally apply styles based on the active theme, which is especially useful to avoid visual conflicts between light and dark themes when using custom CSS overrides. Short examples:
## Option 1. Adding `data-theme` attribute to `<body>` or `#root`
`<body data-theme="light">` or `<body data-theme="dark">`
Then external CSS can do:
```
body[data-theme="dark"] .my-custom-class {
background-color: #222;
}
body[data-theme="light"] .my-custom-class {
background-color: #fff;
}
```
## Option 2: Adding a theme-specific class to `<body>`:
`<body class="superset-theme-light superset-theme-default">` or `<body class="superset-theme-dark">`
CSS usage:
```
.superset-theme-dark .chart-container {
border-color: #444;
}
```
@mistercrunch @rusackas @msyavuz @dosu Is something like this currently available, and if not, would a PR implementing this be acceptable approach? Do you prefer the attribute or custom class approach?
GitHub link: https://github.com/apache/superset/discussions/37035#discussioncomment-15468642
----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org