Need an urgent help How can i change text color and background of canvas in dark theme

[PARKER-X]

background is not changing how to change text and bg change when switch to dark mode

[PARKER-X]

@dosu

[dosubot[bot]]

Hey @PARKER-X! Here are two ways to change the text color and background in dark mode:

1. Global dark theme config (recommended)

In your superset_config.py, set THEME_DARK with the Ant Design tokens that control background and text colors [1]:

THEME_DARK = {
    "algorithm": "dark",
    "token": {
        "colorPrimary": "#4d9aff",
        "colorBgContainer": "#1a1a2e",   # chart card / container background
        "colorBgLayout": "#0f0f1a",      # page canvas background
        "colorText": "#e0e0e0",          # primary text color
        "colorTextSecondary": "#a0a0a0", # secondary text
    },
}

Also make sure the dark mode toggle is enabled in your feature flags [1]:

FEATURE_FLAGS = {
    "THEME_ENABLE_DARK_THEME_SWITCH": True,
}

The dashboard chart cards use colorBgContainer for their background [2], so overriding that token is the key to fixing the white background you're seeing in dark mode.

You can experiment with token values using the Ant Design theme editor.

2. Per-dashboard CSS override (quick fix)

If you just need to fix one dashboard, go into edit mode → ⋮ menu → Edit CSS and add [3]:

.dashboard-grid {
    background-color: #1a1a2e !important;
    color: #e0e0e0 !important;
}

.dashboard-component-chart-holder {
    background-color: #1e1e30 !important;
    color: #e0e0e0 !important;
}

The global THEME_DARK approach (option 1) is the better long-term solution since it applies consistently across all dashboards and UI elements. Would you like me to look up the full list of available Ant Design tokens that Superset exposes?

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[PARKER-X]

@dosu what happen if i switch to light mode then dark mode i want my css should be correct one css for both

[PARKER-X]

@dosu reply what happen if i switch to light mode then dark mode i want my css should be correct one css for both

[dosubot[bot]]

@PARKER-X — unfortunately, Superset currently does not provide a way to write a single set of dashboard CSS that automatically adapts when you switch between light and dark mode. The theme toggle works through React/Ant Design internals, and no CSS class or data-theme attribute is added to the DOM that your custom CSS could key off of [1] [2].

This means if you hard-code colors like background: #1a1a2e in dashboard CSS, those colors will stay the same in both modes — breaking one or the other.

Your best options:

1. Use THEME_DARK + THEME_DEFAULT in superset_config.py instead of dashboard CSS. This is the correct approach for theme-aware styling, since these tokens are automatically swapped when the user toggles modes [3]:

   THEME_DEFAULT = {
       "token": {
           "colorBgContainer": "#ffffff",
           "colorText": "#333333",
       },
   }
   
   THEME_DARK = {
       "algorithm": "dark",
       "token": {
           "colorBgContainer": "#1a1a2e",
           "colorText": "#e0e0e0",
       },
   }

2. If you must use dashboard CSS, avoid hard-coded colors. Use transparent, inherit, or currentColor where possible so the underlying theme colors show through:

   .dashboard-component-chart-holder {
       background: transparent;
       border: 1px solid currentColor;
   }

3. prefers-color-scheme media query is unreliable for this — it detects the OS-level preference, not Superset's in-app toggle [4]. So if a user manually picks "Dark" in Superset but their OS is set to light, the media query won't match.

The THEME_DEFAULT / THEME_DARK config approach (option 1) is the way to get one configuration that works correctly in both modes. The per-dashboard CSS editor is better suited for layout tweaks (spacing, fonts, borders) rather than color overrides.

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.