@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?

@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]
• colorBgContainer — the container/content area background [2]
• colorBgLayout — the layout/sidebar background [3]

To change the background to a dark gray instead of black, for example:

THEME = {
    "algorithm": "dark",
    "token": {
        "colorBgBase": "#1a1a2e",
        "colorBgContainer": "#16213e",
        "colorBgLayout": "#0f3460",
    }
}

To enable the theme editor, add this to your superset_config.py [4]:

DEFAULT_FEATURE_FLAGS = {
    "THEME_ALLOW_THEME_EDITOR_BETA": True,
}

Once enabled, a palette icon button will appear in the navbar [5]. Clicking it opens a modal where you can:

1. Select pre-built example themes from a dropdown (e.g., supersetDark, funkyDark) [6]
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]. 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.

To reply, just mention @dosu.

Docs are dead. Just use Dosu.

@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",
}
}

@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].

Here's what you need to do:

1. Set your theme in superset_config.py (not config.py directly — use your override file):

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]

3. Restart Superset to clear the bootstrap data cache (it's cached for 60 seconds on the backend) [3].

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] [5].

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].

To reply, just mention @dosu.

Docs are dead. Just use Dosu.