You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@superset.apache.org by "Yisel-Hernandez (via GitHub)" <gi...@apache.org> on 2026/04/22 13:36:39 UTC
[D] Customize dark mode colors [superset]
GitHub user Yisel-Hernandez created a discussion: Customize dark mode colors
Good morning, is it possible to customize the colors of the dark mode across the entire interface from the config.py file?
GitHub link: https://github.com/apache/superset/discussions/39564
----
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] Customize dark mode colors [superset]
Posted by "Yisel-Hernandez (via GitHub)" <gi...@apache.org>.
GitHub user Yisel-Hernandez added a comment to the discussion: Customize dark mode colors
@dosu
I did it exactly as you said and added it to superset_config.py, but it doesn’t work. It does not apply the color customization permanently. I’m attaching a screenshot of how I did it, and I also tried placing it in THEME_DEFAULT, but that didn’t work either. Should I keep anything else in mind, or do you know what might be happening? (I also cleared the cache.)
<img width="374" height="384" alt="imagen (24)" src="https://github.com/user-attachments/assets/f5e89d06-2ea4-4cb1-b602-257269596caf" />
GitHub link: https://github.com/apache/superset/discussions/39564#discussioncomment-16703409
----
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] Customize dark mode colors [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Customize dark mode colors
<!-- Answer -->
@Yisel-Hernandez The most likely reason your `THEME` config didn't work is that **browser localStorage is overriding your server-side settings**. When you used the theme editor, it saved customizations to localStorage (key `superset-theme`), and those take priority over the config in `superset_config.py` [[1]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/theme/ThemeController.tsx#L75-L84).
Here's what you need to do:
**1. Set your theme in `superset_config.py`** (not `config.py` directly — use your override file):
```python
THEME = {
"algorithm": "dark",
"token": {
"colorPrimary": "#0f172a",
"colorInfo": "#0f172a",
"colorBgBase": "#0f172a",
"colorLink": "#1677ff",
"colorSuccess": "#10b981",
"colorError": "#dc0000",
"colorLinkHover": "#ffffff",
"colorLinkActive": "#ffffff"
}
}
```
**2. Clear browser localStorage** — this is the critical step most people miss:
- Open browser DevTools (F12) → **Application** → **Local Storage**
- Find your Superset domain
- Delete both `superset-theme` and `superset-theme-mode` keys [[2]](https://github.com/apache/superset/issues/36979#L125-L135)
**3. Restart Superset** to clear the bootstrap data cache (it's cached for 60 seconds on the backend) [[3]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/views/base.py#L295).
**4. Hard refresh** your browser (Ctrl+Shift+R).
Also make sure you're using the key `THEME` — not `THEME_DEFAULT` or `THEME_OVERRIDES`, which are either deprecated or won't work [[4]](https://github.com/apache/superset/issues/36979#L130-L150) [[5]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/UPDATING.md#L30).
One thing to be aware of: if you use the theme editor again after this, it will save new values to localStorage that will override your `superset_config.py` settings. The server config is only applied on fresh loads when no localStorage customization exists [[6]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/views/RootContextProviders.tsx#L36-L38).
<!-- 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=f8799b6b-a93d-4c71-84ec-bb3b9917bd9b) [](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/39564#discussioncomment-16690888
----
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] Customize dark mode colors [superset]
Posted by "Yisel-Hernandez (via GitHub)" <gi...@apache.org>.
GitHub user Yisel-Hernandez added a comment to the discussion: Customize dark mode colors
@dosu
I’d like to change, for example, the background color. Right now it seems to be black, but I want to modify it. How can I identify the specific class or identifier for the background color?
And how can I enable and use THEME_ALLOW_THEME_EDITOR_BETA?
GitHub link: https://github.com/apache/superset/discussions/39564#discussioncomment-16671079
----
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] Customize dark mode colors [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Customize dark mode colors
<!-- Answer -->
Yes, you can customize dark mode colors from your `superset_config.py` using the `THEME` setting. Superset uses Ant Design v5's token-based theming system [[1]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx).
To enable dark mode with custom colors, add something like this:
```python
THEME = {
"algorithm": "dark",
"token": {
"colorPrimary": "#2893B3",
"colorError": "#e04355",
"colorWarning": "#fcc700",
"colorSuccess": "#5ac189",
"colorInfo": "#66bcfe",
}
}
```
The `"algorithm": "dark"` part activates dark mode, and the `token` dictionary lets you override specific colors using [Ant Design v5 token names](https://ant.design/docs/react/customize-theme#seedtoken) [[2]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/config.py#L684). You can see the default token values in the [Theme.tsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx#L65-L93) file and example dark themes in [exampleThemes.ts](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts#L28-L59).
A couple of useful feature flags you can also enable in your config [[3]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/config.py#L567-L575):
- **`THEME_ENABLE_DARK_THEME_SWITCH`** — adds a toggle in the navbar to switch between light and dark mode
- **`THEME_ALLOW_THEME_EDITOR_BETA`** — enables a JSON theme editor in the UI for experimenting with custom themes
One tip: if your changes don't seem to take effect, clear the `superset-theme` key from your browser's localStorage [[4]](https://github.com/apache/superset/discussions/38720#discussioncomment-16192347).
<!-- 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=741d9218-97c5-4e75-a5f4-fe1f2d7ba6c1) [](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/39564#discussioncomment-16670983
----
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] Customize dark mode colors [superset]
Posted by "dosubot[bot] (via GitHub)" <gi...@apache.org>.
GitHub user dosubot[bot] added a comment to the discussion: Customize dark mode colors
<!-- Answer -->
@Yisel-Hernandez The dark mode background is controlled by **Ant Design v5 tokens**. When you set `"algorithm": "dark"`, Ant Design's dark algorithm auto-generates background colors from seed values. The main tokens you'll want to override are:
- **`colorBgBase`** — the base page background (the "black" you're seeing) [[1]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/GlobalStyles.tsx#L35)
- **`colorBgContainer`** — the container/content area background [[2]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx#L209)
- **`colorBgLayout`** — the layout/sidebar background [[3]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/hooks/useJsonTreeTheme.ts#L26)
To change the background to a dark gray instead of black, for example:
```python
THEME = {
"algorithm": "dark",
"token": {
"colorBgBase": "#1a1a2e",
"colorBgContainer": "#16213e",
"colorBgLayout": "#0f3460",
}
}
```
***
To enable the **theme editor**, add this to your `superset_config.py` [[4]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset/config.py#L571-L575):
```python
DEFAULT_FEATURE_FLAGS = {
"THEME_ALLOW_THEME_EDITOR_BETA": True,
}
```
Once enabled, a **palette icon button** will appear in the navbar [[5]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/ThemeEditor/index.tsx#L38-L83). Clicking it opens a modal where you can:
1. **Select pre-built example themes** from a dropdown (e.g., `supersetDark`, `funkyDark`) [[6]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/exampleThemes.ts#L22-L60)
2. **Edit theme JSON directly** — modify tokens in real-time and see changes instantly
3. **Save** to apply your customizations
Note that the theme editor saves changes to your **browser's localStorage** (key: `superset-theme`), so they persist across page reloads but only in that browser [[7]](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/theme/ThemeController.tsx#L68-L84). This makes it great for experimenting — once you find the colors you like, copy the token values into your `superset_config.py` `THEME` setting for a permanent, server-wide configuration.
<!-- 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=0a4e8775-5c03-4f43-9fd1-d79292ea7239) [](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/39564#discussioncomment-16671154
----
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] Customize dark mode colors [superset]
Posted by "Yisel-Hernandez (via GitHub)" <gi...@apache.org>.
GitHub user Yisel-Hernandez added a comment to the discussion: Customize dark mode colors
@dosu
From the dark mode templates, I changed these colors and this is the code it provided:
{
"token": {
"colorPrimary": "#0f172a",
"colorInfo": "#0f172a",
"colorBgBase": "#0f172a",
"colorLink": "#1677ff",
"colorSuccess": "#10b981",
"colorError": "#dc0000",
"colorLinkHover": "#ffffff",
"colorLinkActive": "#ffffff"
},
"algorithm": "dark"
}
How can I set this in the config.py so the colors remain fixed and not just for the current session?
I tried this and it didn’t work:
THEME = {
"algorithm": "dark",
"token": {
"colorBgBase": "#1a1a2e",
"colorBgContainer": "#16213e",
"colorBgLayout": "#0f3460",
}
}
GitHub link: https://github.com/apache/superset/discussions/39564#discussioncomment-16690807
----
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