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 [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
