You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "Dev10-34 (via GitHub)" <gi...@apache.org> on 2026/02/11 10:47:26 UTC
[D] Facing issues with superset theme after ui overhaul [superset]
GitHub user Dev10-34 created a discussion: Facing issues with superset theme after ui overhaul
I was using superset version 3.0.2 and am planning an update to superset 6.0.0. I had added some custom pages and want to add them to the version 6.0.0 image as well. However, facing issues with this as the supersetTheme variable changed completely. No more gridUnit or the huge variety of colors that were available. The new system is token based and a complete overhaul from the previous one. I am not able to find any token for absolute black (#000000) either. Is there a backward compatibility here? Or how does one maintain the previous behaviors now?
GitHub link: https://github.com/apache/superset/discussions/37889
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
Thanks for sharing this! The Ant Design maptoken documentation is a great reference for anyone needing to look up or customize theme token values in Superset, especially since Superset 6.0.0 uses Ant Design v5 tokens under the hood. I'll point users to this link for authoritative info on token values and theme customization going forward.
<!-- 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).*
---
Share context across your team and agents. Try [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-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=knowledge-infrastructure-feedback&utm_term=apache%2Fsuperset&message_id=174c7cff-70eb-45c5-a1e4-d19553dd350c) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-learn-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=knowledge-infrastructure-add-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768407
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
You can use Superset’s default theme colors in your custom React components without writing any CSS by leveraging the theme context and tokens. Superset 6.0 uses Ant Design v5’s token-based theming, and exposes the theme via the supersetTheme object and the useTheme hook from @superset-ui/core. This lets your components automatically adapt to theme changes (like light/dark mode) and use whatever colors are defined in the current theme config.
Here’s how you can do it:
1. **Access theme tokens in your component**:
- Import the useTheme hook or supersetTheme object.
- Reference color tokens like colorPrimary, colorText, or the legacy palette (primary, error, warning, success, info, grayscale) with tone variants (dark5, base, light5, etc).
2. **Example using useTheme hook**:
```jsx
import { useTheme } from '@superset-ui/core';
function MyComponent() {
const theme = useTheme();
return (
<div style={{ color: theme.colorText, background: theme.colorBgContainer }}>
This text uses the default theme colors and adapts to theme changes.
</div>
);
}
```
Or, for legacy palette:
```jsx
import { useTheme } from '@superset-ui/core';
function MyComponent() {
const theme = useTheme();
return (
<div style={{ color: theme.colors.primary.base }}>
Uses primary color from the theme.
</div>
);
}
```
3. **Styled components**:
If you use Emotion’s styled, you can access theme tokens in your styles:
```jsx
import { styled } from '@superset-ui/core';
const StyledBox = styled.div`
color: ${({ theme }) => theme.colorText};
background: ${({ theme }) => theme.colorBgContainer};
`;
```
4. **ThemeProvider**:
If your custom pages are outside Superset’s main app, wrap them in a ThemeProvider with supersetTheme to ensure theme context is available:
```jsx
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
<ThemeProvider theme={supersetTheme}>
<MyComponent />
</ThemeProvider>
```
[source](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js)
Avoid hardcoding colors—always reference theme tokens so your components stay in sync with Superset’s theme and adapt to light/dark mode or any customizations. For a list of available tokens, check the supersetTheme object or use the [Ant Design Theme Editor](https://ant.design/theme-editor) for mapping and exploration.
[More details and examples](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-theme/Theme.stories.tsx)
<!-- 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/427a583f-1c71-4fd6-ae18-ff8dcb735aec?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/427a583f-1c71-4fd6-ae18-ff8dcb735aec?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/427a583f-1c71-4fd6-ae18-ff8dcb735aec?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/427a583f-1c71-4fd6-ae18-ff8dcb735aec?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/427a583f-1c71-4fd6-ae18-ff8dcb735aec?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/427a583f-1c71-4fd6-ae18-ff8dcb735aec?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/427a583f-1c71-4fd6-ae18-ff8dcb735aec?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=You%20can%20use%20Superset%E2%80%99s%20default%20theme%20colors%20in%20your%20custom%20React%20components%20without%20writing%20any%20CSS%20by%20leveraging%20the%20theme%20context%20and%20tokens.%20Superset%206.0%20uses%20Ant%20Design%20v5%E2%80%99s%20token-based%20theming%2C%20and%20exposes%20the%20theme%20via%20the%20supersetTheme%20object%20and%20the%20useTheme%20hook%20from%20%40superset-ui/core.%20This%20lets%20your%20components%20automatically%20adapt%20to%20theme%20changes%20%28like%20light/dark%20mode%29%20and%20use%20whatever%20colors%20are%20defined%20in%20the%20current%20theme%20config.%0A%0AHere%E2%80%99s%20how%20you%20can%20do%20it%3A%0A%0A1.%20%2A%2AAccess%20theme%20tokens%20in%20your%20component%2A%2A%3A%0A%20%20%20-%20Import%20the%20us
eTheme%20hook%20or%20supersetTheme%20object.%0A%20%20%20-%20Reference%20color%20tokens%20like%20colorPrimary%2C%20colorText%2C%20or%20the%20legacy%20palette%20%28primary%2C%20error%2C%20warning%2C%20success%2C%20info%2C%20grayscale%29%20with%20tone%20variants%20%28dark5%2C%20base%2C%20light5%2C%20etc%29.%0A%0A2.%20%2A%2AExample%20using%20useTheme%20hook%2A%2A%3A%0A%20%20%20%60%60%60jsx%0A%20%20%20import%20%7B%20useTheme%20%7D%20from%20%27%40superset-ui/core%27%3B%0A%0A%20%20%20function%20MyComponent%28%29%20%7B%0A%20%20%20%20%20const%20theme%20%3D%20useTheme%28%29%3B%0A%20%20%20%20%20return%20%28%0A%20%20%20%20%20%20%20%3Cdiv%20style%3D%7B%7B%20color%3A%20theme.colorText%2C%20background%3A%20theme.colorBgContainer%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20This%20text%20uses%20the%20default%20theme%20colors%20and%20adapts%20to%20theme%20changes.%0A%20%20%20%20%20%20%20%3C/div%3E%0A%20%20%20%20%20%29%3B%0A%20%20%20%7D%0A%20%20%20%60%60%60%0A%20%20%20Or%2C%20for%20legacy%20palette%3A%0A
%20%20%20%60%60%60jsx%0A%20%20%20import%20%7B%20useTheme%20%7D%20from%20%27%40superset-ui/core%27%3B%0A%0A%20%20%20function%20MyComponent%28%29%20%7B%0A%20%20%20%20%20const%20theme%20%3D%20useTheme%28%29%3B%0A%20%20%20%20%20return%20%28%0A%20%20%20%20%20%20%20%3Cdiv%20style%3D%7B%7B%20color%3A%20theme.colors.primary.base%20%7D%7D%3E%0A%20%20%20%20%20%20%20%20%20Uses%20primary%20color%20from%20the%20theme.%0A%20%20%20%20%20%20%20%3C/div%3E%0A%20%20%20%20%20%29%3B%0A%20%20%20%7D%0A%20%20%20%60%60%60%0A%0A3.%20%2A%2AStyled%20components%2A%2A%3A%0A%20%20%20If%20you%20use%20Emotion%E2%80%99s%20styled%2C%20you%20can%20access%20theme%20tokens%20in%20your%20styles%3A%0A%20%20%20%60%60%60jsx%0A%20%20%20import%20%7B%20styled%20%7D%20from%20%27%40superset-ui/core%27%3B%0A%0A%20%20%20const%20StyledBox%20%3D%20styled.div%60%0A%20%20%20%20%20color%3A%20%24%7B%28%7B%20theme%20%7D%29%20%3D%3E%20theme.colorText%7D%3B%0A%20%20%20%20%20background%3A%20%24%7B%28%7B%20theme%20%7D%29%20%3D%3E%20theme.col
orBgContainer%7D%3B%0A%20%20%20%60%3B%0A%20%20%20%60%60%60%0A%0A4.%20%2A%2AThemeProvider%2A%2A%3A%0A%20%20%20If%20your%20custom%20pages%20are%20outside%20Superset%E2%80%99s%20main%20app%2C%20wrap%20them%20in%20a%20ThemeProvider%20with%20supersetTheme%20to%20ensure%20theme%20context%20is%20available%3A%0A%20%20%20%60%60%60jsx%0A%20%20%20import%20%7B%20ThemeProvider%2C%20supersetTheme%20%7D%20from%20%27%40superset-ui/core%27%3B%0A%0A%20%20%20%3CThemeProvider%20theme%3D%7BsupersetTheme%7D%3E%0A%20%20%20%20%20%3CMyComponent%20/%3E%0A%20%20%20%3C/ThemeProvider%3E%0A%20%20%20%60%60%60%0A%20%20%20%5Bsource%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js%29%0A%0AAvoid%20hardcoding%20colors%E2%80%94always%20reference%20theme%20tokens%20so%20your%20components%20stay%20in%20sync%20with%20Superset%E2%80%99s%20theme%20and%20adapt%20to%20light/dark%20mode%20or%20any%20customizations.%20For%20a%20list%20of%20available%2
0tokens%2C%20check%20the%20supersetTheme%20object%20or%20use%20the%20%5BAnt%20Design%20Theme%20Editor%5D%28https%3A//ant.design/theme-editor%29%20for%20mapping%20and%20exploration.%20%20%0A%5BMore%20details%20and%20examples%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-theme/Theme.stories.tsx%29) [](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/37889)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15767804
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
Superset 6.0.0 switched to Ant Design v5's token-based theming, removing legacy variables like `gridUnit` and the old grayscale color palette. There’s no backward compatibility for these variables—you’ll need to manually update your custom pages to use the new tokens. For spacing, use `sizeUnit` or other Ant Design spacing tokens; for colors, use the closest available token (like `colorText`, `colorIcon`, `colorFill`, etc.), or define a custom token in your theme config if you need something like absolute black (#000000) [source](https://github.com/apache/superset/pull/34732).
To replicate previous behaviors, you can extend your theme in `superset_config.py` by adding custom tokens, then reference them in your styled components. The [Ant Design Theme Editor](https://ant.design/theme-editor) is helpful for exploring and mapping old variables to new tokens. Superset’s theme system doesn’t support inheritance between themes, so you’ll need to maintain light/dark variants manually [source](https://github.com/apache/superset/discussions/34647).
Custom CSS overrides from earlier versions will likely break due to changes in class names and DOM structure. Use stable selectors like chart IDs or `data-test` attributes, and avoid targeting dynamic class names [source](https://github.com/apache/superset/discussions/37504).
For migration: document your customizations, use CSS templates for persistence, and plan to review selectors after each major upgrade. If you need to sync custom pages with Superset’s theme mode, read the mode from `localStorage` (`superset-theme-mode`) and apply corresponding styles [source](https://github.com/apache/superset/discussions/37375).
Official theming docs and the theme editor beta feature are good references for designing and exporting theme configs [source](https://github.com/apache/superset/blob/master/docs/docs/configuration/theming.mdx).
<!-- 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/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%206.0.0%20switched%20to%20Ant%20Design%20v5%27s%20token-based%20theming%2C%20removing%20legacy%20variables%20like%20%60gridUnit%60%20and%20the%20old%20grayscale%20color%20palette.%20There%E2%80%99s%20no%20backward%20compatibility%20for%20these%20variables%E2%80%94you%E2%80%99ll%20need%20to%20manually%20update%20your%20custom%20pages%20to%20use%20the%20new%20tokens.%20For%20spacing%2C%20use%20%60sizeUnit%60%20or%20other%20Ant%20Design%20spacing%20tokens%3B%20for%20colors%2C%20use%20the%20closest%20available%20token%20%28like%20%60colorText%60%2C%20%60colorIcon%60%2C%20%60colorFill%60%2C%20etc.%29%2C%20or%20define%20a%20custom%20token%20in%20your%20theme%20config%20if%20you%20need%20something%20like%20absolute%20black%20%28%23000000%29%20%5Bsou
rce%5D%28https%3A//github.com/apache/superset/pull/34732%29.%0A%0ATo%20replicate%20previous%20behaviors%2C%20you%20can%20extend%20your%20theme%20in%20%60superset_config.py%60%20by%20adding%20custom%20tokens%2C%20then%20reference%20them%20in%20your%20styled%20components.%20The%20%5BAnt%20Design%20Theme%20Editor%5D%28https%3A//ant.design/theme-editor%29%20is%20helpful%20for%20exploring%20and%20mapping%20old%20variables%20to%20new%20tokens.%20Superset%E2%80%99s%20theme%20system%20doesn%E2%80%99t%20support%20inheritance%20between%20themes%2C%20so%20you%E2%80%99ll%20need%20to%20maintain%20light/dark%20variants%20manually%20%5Bsource%5D%28https%3A//github.com/apache/superset/discussions/34647%29.%0A%0ACustom%20CSS%20overrides%20from%20earlier%20versions%20will%20likely%20break%20due%20to%20changes%20in%20class%20names%20and%20DOM%20structure.%20Use%20stable%20selectors%20like%20chart%20IDs%20or%20%60data-test%60%20attributes%2C%20and%20avoid%20targeting%20dynamic%20class%20names%20%5Bsour
ce%5D%28https%3A//github.com/apache/superset/discussions/37504%29.%0A%0AFor%20migration%3A%20document%20your%20customizations%2C%20use%20CSS%20templates%20for%20persistence%2C%20and%20plan%20to%20review%20selectors%20after%20each%20major%20upgrade.%20If%20you%20need%20to%20sync%20custom%20pages%20with%20Superset%E2%80%99s%20theme%20mode%2C%20read%20the%20mode%20from%20%60localStorage%60%20%28%60superset-theme-mode%60%29%20and%20apply%20corresponding%20styles%20%5Bsource%5D%28https%3A//github.com/apache/superset/discussions/37375%29.%0A%0AOfficial%20theming%20docs%20and%20the%20theme%20editor%20beta%20feature%20are%20good%20references%20for%20designing%20and%20exporting%20theme%20configs%20%5Bsource%5D%28https%3A//github.com/apache/superset/blob/master/docs/docs/configuration/theming.mdx%29.) [](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/37889)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15767706
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
Thanks for sharing this! The Ant Design maptoken documentation is a great reference for anyone needing to look up or customize theme token values in Superset, especially since Superset 6.0.0 uses Ant Design v5 tokens under the hood. I'll point users to this link for authoritative info on token values and theme customization going forward.
<!-- 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/174c7cff-70eb-45c5-a1e4-d19553dd350c?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/174c7cff-70eb-45c5-a1e4-d19553dd350c?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/174c7cff-70eb-45c5-a1e4-d19553dd350c?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/174c7cff-70eb-45c5-a1e4-d19553dd350c?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/174c7cff-70eb-45c5-a1e4-d19553dd350c?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/174c7cff-70eb-45c5-a1e4-d19553dd350c?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/174c7cff-70eb-45c5-a1e4-d19553dd350c?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Thanks%20for%20sharing%20this%21%20The%20Ant%20Design%20maptoken%20documentation%20is%20a%20great%20reference%20for%20anyone%20needing%20to%20look%20up%20or%20customize%20theme%20token%20values%20in%20Superset%2C%20especially%20since%20Superset%206.0.0%20uses%20Ant%20Design%20v5%20tokens%20under%20the%20hood.%20I%27ll%20point%20users%20to%20this%20link%20for%20authoritative%20info%20on%20token%20values%20and%20theme%20customization%20going%20forward.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//githu
b.com/apache/superset/discussions/37889)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768407
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
Superset 6.0.0 switched to Ant Design v5's token-based theming, removing legacy variables like `gridUnit` and the old grayscale color palette. There’s no backward compatibility for these variables—you’ll need to manually update your custom pages to use the new tokens. For spacing, use `sizeUnit` or other Ant Design spacing tokens; for colors, use the closest available token (like `colorText`, `colorIcon`, `colorFill`, etc.), or define a custom token in your theme config if you need something like absolute black (#000000) [source](https://github.com/apache/superset/pull/34732).
To replicate previous behaviors, you can extend your theme in `superset_config.py` by adding custom tokens, then reference them in your styled components. The [Ant Design Theme Editor](https://ant.design/theme-editor) is helpful for exploring and mapping old variables to new tokens. Superset’s theme system doesn’t support inheritance between themes, so you’ll need to maintain light/dark variants manually [source](https://github.com/apache/superset/discussions/34647).
Custom CSS overrides from earlier versions will likely break due to changes in class names and DOM structure. Use stable selectors like chart IDs or `data-test` attributes, and avoid targeting dynamic class names [source](https://github.com/apache/superset/discussions/37504).
For migration: document your customizations, use CSS templates for persistence, and plan to review selectors after each major upgrade. If you need to sync custom pages with Superset’s theme mode, read the mode from `localStorage` (`superset-theme-mode`) and apply corresponding styles [source](https://github.com/apache/superset/discussions/37375).
Official theming docs and the theme editor beta feature are good references for designing and exporting theme configs [source](https://github.com/apache/superset/blob/master/docs/docs/configuration/theming.mdx).
<!-- 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).*
---
Share context across your team and agents. Try [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-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=knowledge-infrastructure-feedback&utm_term=apache%2Fsuperset&message_id=69a105a2-8405-4b60-9f9d-f34ba48de7e8) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-learn-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=knowledge-infrastructure-add-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15767706
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
You can see the default theme tokens and their hex values in Superset’s source code. The main color tokens are defined in the Theme class ([Theme.tsx](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx)), for example:
- `colorPrimary`: `#2893B3`
- `colorLink`: `#2893B3`
- `colorError`: `#e04355`
- `colorWarning`: `#fcc700`
- `colorSuccess`: `#5ac189`
- `colorInfo`: `#66bcfe`
Font families, logo properties, and other style tokens are also set there. For a full list of allowed tokens (including all Ant Design v5 tokens Superset supports), check [types.ts](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/types.ts)—this file lists every token key you can use, though not their values.
For more examples, [exampleThemes.ts](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts) shows sample theme configs with hex values for custom themes.
If you want to access these tokens programmatically in your React components, use the `useTheme` hook or the `supersetTheme` object from `@superset-ui/core`. This lets your components always use the current theme’s values and adapt to theme changes automatically.
Let me know if you want a JSON dump of the default color tokens!
<!-- 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=37129118-2129-4c05-993c-0c95e1daa9f5) [](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/37889#discussioncomment-15767883
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
You can see the default theme tokens and their hex values in Superset’s source code. The main color tokens are defined in the Theme class ([Theme.tsx](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx)), for example:
- `colorPrimary`: `#2893B3`
- `colorLink`: `#2893B3`
- `colorError`: `#e04355`
- `colorWarning`: `#fcc700`
- `colorSuccess`: `#5ac189`
- `colorInfo`: `#66bcfe`
Font families, logo properties, and other style tokens are also set there. For a full list of allowed tokens (including all Ant Design v5 tokens Superset supports), check [types.ts](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/types.ts)—this file lists every token key you can use, though not their values.
For more examples, [exampleThemes.ts](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts) shows sample theme configs with hex values for custom themes.
If you want to access these tokens programmatically in your React components, use the `useTheme` hook or the `supersetTheme` object from `@superset-ui/core`. This lets your components always use the current theme’s values and adapt to theme changes automatically.
Let me know if you want a JSON dump of the default color tokens!
<!-- 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/37129118-2129-4c05-993c-0c95e1daa9f5?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/37129118-2129-4c05-993c-0c95e1daa9f5?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/37129118-2129-4c05-993c-0c95e1daa9f5?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/37129118-2129-4c05-993c-0c95e1daa9f5?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/37129118-2129-4c05-993c-0c95e1daa9f5?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/37129118-2129-4c05-993c-0c95e1daa9f5?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/37129118-2129-4c05-993c-0c95e1daa9f5?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=You%20can%20see%20the%20default%20theme%20tokens%20and%20their%20hex%20values%20in%20Superset%E2%80%99s%20source%20code.%20The%20main%20color%20tokens%20are%20defined%20in%20the%20Theme%20class%20%28%5BTheme.tsx%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx%29%29%2C%20for%20example%3A%0A%0A-%20%60colorPrimary%60%3A%20%60%232893B3%60%0A-%20%60colorLink%60%3A%20%60%232893B3%60%0A-%20%60colorError%60%3A%20%60%23e04355%60%0A-%20%60colorWarning%60%3A%20%60%23fcc700%60%0A-%20%60colorSuccess%60%3A%20%60%235ac189%60%0A-%20%60colorInfo%60%3A%20%60%2366bcfe%60%0A%0AFont%20families%2C%20logo%20properties%2C%20and%20other%20style%20tokens%20are%20also%20set%20there.%20For%20a%20full%20list%20
of%20allowed%20tokens%20%28including%20all%20Ant%20Design%20v5%20tokens%20Superset%20supports%29%2C%20check%20%5Btypes.ts%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/types.ts%29%E2%80%94this%20file%20lists%20every%20token%20key%20you%20can%20use%2C%20though%20not%20their%20values.%0A%0AFor%20more%20examples%2C%20%5BexampleThemes.ts%5D%28https%3A//github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts%29%20shows%20sample%20theme%20configs%20with%20hex%20values%20for%20custom%20themes.%0A%0AIf%20you%20want%20to%20access%20these%20tokens%20programmatically%20in%20your%20React%20components%2C%20use%20the%20%60useTheme%60%20hook%20or%20the%20%60supersetTheme%60%20object%20from%20%60%40superset-ui/core%60.%20This%20lets%20your%20components%20always%20use%20the%20current%20theme%E2%80%99s%20values%20and%20adapt%20to%20theme%20changes%20automatically.%0A%0ALet%20me%20know%2
0if%20you%20want%20a%20JSON%20dump%20of%20the%20default%20color%20tokens%21) [](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/37889)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15767883
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "Dev10-34 (via GitHub)" <gi...@apache.org>.
GitHub user Dev10-34 added a comment to the discussion: Facing issues with superset theme after ui overhaul
@dosu
I already found the references to the hex values you mentioned. Theme.tsx you mentioned doesn't exist. Neither does. exampleTheme.ts. Its fine though. Thanks for trying. I have more clarity than before now. Ig I will just check antd if they give these values or not. Thanks again.
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768022
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
You can use Superset’s default theme colors in your custom React components without writing any CSS by leveraging the theme context and tokens. Superset 6.0 uses Ant Design v5’s token-based theming, and exposes the theme via the supersetTheme object and the useTheme hook from @superset-ui/core. This lets your components automatically adapt to theme changes (like light/dark mode) and use whatever colors are defined in the current theme config.
Here’s how you can do it:
1. **Access theme tokens in your component**:
- Import the useTheme hook or supersetTheme object.
- Reference color tokens like colorPrimary, colorText, or the legacy palette (primary, error, warning, success, info, grayscale) with tone variants (dark5, base, light5, etc).
2. **Example using useTheme hook**:
```jsx
import { useTheme } from '@superset-ui/core';
function MyComponent() {
const theme = useTheme();
return (
<div style={{ color: theme.colorText, background: theme.colorBgContainer }}>
This text uses the default theme colors and adapts to theme changes.
</div>
);
}
```
Or, for legacy palette:
```jsx
import { useTheme } from '@superset-ui/core';
function MyComponent() {
const theme = useTheme();
return (
<div style={{ color: theme.colors.primary.base }}>
Uses primary color from the theme.
</div>
);
}
```
3. **Styled components**:
If you use Emotion’s styled, you can access theme tokens in your styles:
```jsx
import { styled } from '@superset-ui/core';
const StyledBox = styled.div`
color: ${({ theme }) => theme.colorText};
background: ${({ theme }) => theme.colorBgContainer};
`;
```
4. **ThemeProvider**:
If your custom pages are outside Superset’s main app, wrap them in a ThemeProvider with supersetTheme to ensure theme context is available:
```jsx
import { ThemeProvider, supersetTheme } from '@superset-ui/core';
<ThemeProvider theme={supersetTheme}>
<MyComponent />
</ThemeProvider>
```
[source](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/.storybook/themeDecorator.js)
Avoid hardcoding colors—always reference theme tokens so your components stay in sync with Superset’s theme and adapt to light/dark mode or any customizations. For a list of available tokens, check the supersetTheme object or use the [Ant Design Theme Editor](https://ant.design/theme-editor) for mapping and exploration.
[More details and examples](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-theme/Theme.stories.tsx)
<!-- 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).*
---
Share context across your team and agents. Try [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-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=knowledge-infrastructure-feedback&utm_term=apache%2Fsuperset&message_id=427a583f-1c71-4fd6-ae18-ff8dcb735aec) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-learn-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=knowledge-infrastructure-add-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15767804
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
In Superset 6.0.0, the default padding and spacing throughout the UI are based on the sizeUnit token, which is set to 4 (interpreted as 4px). Padding values in components are typically multiples of sizeUnit, for example, padding: sizeUnit * 4 (which is 16px by default). There are also tokens like paddingLG, paddingSM, etc., but unless explicitly overridden, their values are derived from Ant Design v5's defaults and use sizeUnit as the base unit. You can access these values at runtime via the theme context (e.g., useTheme or supersetTheme in @superset-ui/core) [reference](https://github.com/apache/superset/issues/36878#issuecomment-3705727562) [reference](https://github.com/apache/superset/pull/34253).
<!-- 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).*
---
Share context across your team and agents. Try [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-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=knowledge-infrastructure-feedback&utm_term=apache%2Fsuperset&message_id=733fc266-ca1e-4d19-b183-0e5a60015882) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-learn-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=knowledge-infrastructure-add-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768308
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] edited a comment on the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
Just a quick heads up: Theme.tsx and exampleThemes.ts do exist, but they were moved in a recent reorg. You’ll find them now under superset-frontend/packages/superset-core/src/ui/theme/ ([Theme.tsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-core/src/ui/theme/Theme.tsx), [exampleThemes.ts](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-core/src/ui/theme/exampleThemes.ts)) due to a UI and theming overhaul in late 2025 [citation](https://github.com/apache/superset/pull/35308). The default theme tokens and their hex values are also defined in superset_config.py under THEME_DEFAULT and THEME_DARK [citation](https://github.com/apache/superset/pull/35220).
If you need a direct reference or a JSON dump of the default tokens, let me know!
<!-- 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).*
---
Share context across your team and agents. Try [Dosu](https://dosu.dev?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-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=knowledge-infrastructure-feedback&utm_term=apache%2Fsuperset&message_id=f8b943f0-054d-48ca-ab0e-ba0addf4c97e) [](https://github.dosu.com/apache/superset?utm_source=github&utm_medium=bot-comment&utm_campaign=github-comment-footer-20260415&utm_content=knowledge-infrastructure-learn-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=knowledge-infrastructure-add-team&utm_term=apache%2Fsuperset)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768037
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
In Superset 6.0.0, the default padding and spacing throughout the UI are based on the sizeUnit token, which is set to 4 (interpreted as 4px). Padding values in components are typically multiples of sizeUnit, for example, padding: sizeUnit * 4 (which is 16px by default). There are also tokens like paddingLG, paddingSM, etc., but unless explicitly overridden, their values are derived from Ant Design v5's defaults and use sizeUnit as the base unit. You can access these values at runtime via the theme context (e.g., useTheme or supersetTheme in @superset-ui/core) [reference](https://github.com/apache/superset/issues/36878#issuecomment-3705727562) [reference](https://github.com/apache/superset/pull/34253).
<!-- 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/733fc266-ca1e-4d19-b183-0e5a60015882?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/733fc266-ca1e-4d19-b183-0e5a60015882?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/733fc266-ca1e-4d19-b183-0e5a60015882?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/733fc266-ca1e-4d19-b183-0e5a60015882?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/733fc266-ca1e-4d19-b183-0e5a60015882?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/733fc266-ca1e-4d19-b183-0e5a60015882?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/733fc266-ca1e-4d19-b183-0e5a60015882?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=In%20Superset%206.0.0%2C%20the%20default%20padding%20and%20spacing%20throughout%20the%20UI%20are%20based%20on%20the%20sizeUnit%20token%2C%20which%20is%20set%20to%204%20%28interpreted%20as%204px%29.%20Padding%20values%20in%20components%20are%20typically%20multiples%20of%20sizeUnit%2C%20for%20example%2C%20padding%3A%20sizeUnit%20%2A%204%20%28which%20is%2016px%20by%20default%29.%20There%20are%20also%20tokens%20like%20paddingLG%2C%20paddingSM%2C%20etc.%2C%20but%20unless%20explicitly%20overridden%2C%20their%20values%20are%20derived%20from%20Ant%20Design%20v5%27s%20defaults%20and%20use%20sizeUnit%20as%20the%20base%20unit.%20You%20can%20access%20these%20values%20at%20runtime%20via%20the%20theme%20context%20%28e.g.%2C%20useTheme%20or%20supersetTheme%20in%20%4
0superset-ui/core%29%C2%A0%5Breference%5D%28https%3A//github.com/apache/superset/issues/36878%23issuecomment-3705727562%29%C2%A0%5Breference%5D%28https%3A//github.com/apache/superset/pull/34253%29.) [](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/37889)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768308
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "Dev10-34 (via GitHub)" <gi...@apache.org>.
GitHub user Dev10-34 added a comment to the discussion: Facing issues with superset theme after ui overhaul
@dosu Is there a reference I can see for each token and its corresponding hex? At least for the default values in superset?
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15767866
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer -->
Just a quick heads up: Theme.tsx and exampleThemes.ts do exist, but they were moved in a recent reorg. You’ll find them now under superset-frontend/packages/superset-core/src/ui/theme/ ([Theme.tsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-core/src/ui/theme/Theme.tsx), [exampleThemes.ts](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-core/src/ui/theme/exampleThemes.ts)) due to a UI and theming overhaul in late 2025 [citation](https://github.com/apache/superset/pull/35308). The default theme tokens and their hex values are also defined in superset_config.py under THEME_DEFAULT and THEME_DARK [citation](https://github.com/apache/superset/pull/35220).
If you need a direct reference or a JSON dump of the default tokens, let me know!
<!-- 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/f8b943f0-054d-48ca-ab0e-ba0addf4c97e?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/f8b943f0-054d-48ca-ab0e-ba0addf4c97e?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/f8b943f0-054d-48ca-ab0e-ba0addf4c97e?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/f8b943f0-054d-48ca-ab0e-ba0addf4c97e?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/f8b943f0-054d-48ca-ab0e-ba0addf4c97e?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/f8b943f0-054d-48ca-ab0e-ba0addf4c97e?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/f8b943f0-054d-48ca-ab0e-ba0addf4c97e?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Just%20a%20quick%20heads%20up%3A%20Theme.tsx%20and%20exampleThemes.ts%20do%20exist%2C%20but%20they%20were%20moved%20in%20a%20recent%20reorg.%20You%E2%80%99ll%20find%20them%20now%20under%20superset-frontend/packages/superset-core/src/ui/theme/%20%28%5BTheme.tsx%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-core/src/ui/theme/Theme.tsx%29%2C%20%5BexampleThemes.ts%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-core/src/ui/theme/exampleThemes.ts%29%29%20due%20to%20a%20UI%20and%20theming%20overhaul%20in%20late%202025%C2%A0%5Bcitation%5D%28https%3A//github.com/apache/superset/pull/35308%29.%20The%20default
%20theme%20tokens%20and%20their%20hex%20values%20are%20also%20defined%20in%20superset_config.py%20under%20THEME_DEFAULT%20and%20THEME_DARK%C2%A0%5Bcitation%5D%28https%3A//github.com/apache/superset/pull/35220%29.%0A%0AIf%20you%20need%20a%20direct%20reference%20or%20a%20JSON%20dump%20of%20the%20default%20tokens%2C%20let%20me%20know%21) [](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/37889)
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768037
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "Dev10-34 (via GitHub)" <gi...@apache.org>.
GitHub user Dev10-34 closed a discussion: Facing issues with superset theme after ui overhaul
I was using superset version 3.0.2 and am planning an update to superset 6.0.0. I had added some custom pages and want to add them to the version 6.0.0 image as well. However, facing issues with this as the supersetTheme variable changed completely. No more gridUnit or the huge variety of colors that were available. The new system is token based and a complete overhaul from the previous one. I am not able to find any token for absolute black (#000000) either. Is there a backward compatibility here? Or how does one maintain the previous behaviors now?
GitHub link: https://github.com/apache/superset/discussions/37889
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "Dev10-34 (via GitHub)" <gi...@apache.org>.
GitHub user Dev10-34 added a comment to the discussion: Facing issues with superset theme after ui overhaul
@dosu, the updated paths to the files you are listing are as follows:
superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts
This is as per the version 6.0.0 release. Not sure if master branch relocated this again or not.
Similarly, for Theme.tsx, you can find the files here: superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx.
Thanks again for trying though. If possible, can you give me the default value for the padding token?
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768266
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "Dev10-34 (via GitHub)" <gi...@apache.org>.
GitHub user Dev10-34 added a comment to the discussion: Facing issues with superset theme after ui overhaul
@dosu, I am not doing any css for the application. Have been using the default theming colors mostly till now. How do I just use the default theme colors then? What I mean to say is that, how do I let the component dynamically change colors based on whatever is defined in superset's default theming?
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15767792
----
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] Facing issues with superset theme after ui overhaul [superset]
Posted by "Dev10-34 (via GitHub)" <gi...@apache.org>.
GitHub user Dev10-34 added a comment to the discussion: Facing issues with superset theme after ui overhaul
@dosu This is the link you can refer to people in the future for issues with looking up token values:
https://ant.design/docs/react/customize-theme#maptoken
GitHub link: https://github.com/apache/superset/discussions/37889#discussioncomment-15768399
----
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