GitHub user dosubot[bot] added a comment to the discussion: Creating custom dark themes in Superset
<!-- Answer --> To make a custom dark theme in Superset that's less "pure black" (e.g., dark gray or dark blue), use `"algorithm": "dark"` in your theme JSON and override specific tokens that control background and text colors. The most impactful tokens for the overall look are: `colorBgContainer`, `colorBgBase`, `colorBgLayout` (for main backgrounds), `colorPrimary` (for highlights and navigation), and `colorText`, `colorTextBase` (for text). You can safely override these tokens in your theme config—just avoid using seed tokens directly in component code, but it's fine to set them in your theme JSON for global effect. There isn't a built-in way to "extend" or inherit from a light theme to create a dark variant without duplicating the JSON. Superset's theme system treats each theme as a flat config, so the best practice is to create a dark theme with `"algorithm": "dark"` and only override the tokens that need to differ from the default dark palette. This minimizes duplication: start from the dark algorithm, then override only the tokens you want to change for your brand or style. There is no internal inheritance or merging between themes—manual editing is required if you want to keep light and dark variants in sync. You can use the Ant Design Theme Editor to experiment and export your JSON, then paste it into your Superset config for live tweaking if you enable the theme editor beta feature. References: - [Superset theming docs](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/docs/docs/configuration/theming.mdx) - [ThemeController code](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/theme/ThemeController.tsx) - [Theme types and allowed tokens](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/theme/types.ts) <!-- 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/b61655cd-cf94-4f80-93fa-ba5994ad5e04?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/b61655cd-cf94-4f80-93fa-ba5994ad5e04?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/b61655cd-cf94-4f80-93fa-ba5994ad5e04?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/b61655cd-cf94-4f80-93fa-ba5994ad5e04?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/b61655cd-cf94-4f80-93fa-ba5994ad5e04?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/b61655cd-cf94-4f80-93fa-ba5994ad5e04?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/b61655cd-cf94-4f80-93fa-ba5994ad5e04?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github)& nbsp;[](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/34647) GitHub link: https://github.com/apache/superset/discussions/34647#discussioncomment-14076884 ---- This is an automatically sent email for notifications@superset.apache.org. To unsubscribe, please send an email to: notifications-unsubscr...@superset.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org
