GitHub user dosubot[bot] added a comment to the discussion: Facing issues with superset theme after ui overhaul
<!-- Answer --> Superset 6.0.0 switched to Ant Design v5's token-based theming, removing legacy variables like `gridUnit` and the old grayscale color palette. There’s no backward compatibility for these variables—you’ll need to manually update your custom pages to use the new tokens. For spacing, use `sizeUnit` or other Ant Design spacing tokens; for colors, use the closest available token (like `colorText`, `colorIcon`, `colorFill`, etc.), or define a custom token in your theme config if you need something like absolute black (#000000) [source](https://github.com/apache/superset/pull/34732). To replicate previous behaviors, you can extend your theme in `superset_config.py` by adding custom tokens, then reference them in your styled components. The [Ant Design Theme Editor](https://ant.design/theme-editor) is helpful for exploring and mapping old variables to new tokens. Superset’s theme system doesn’t support inheritance between themes, so you’ll need to maintain light/dark variants manually [source](https://github.com/apache/superset/discussions/34647). Custom CSS overrides from earlier versions will likely break due to changes in class names and DOM structure. Use stable selectors like chart IDs or `data-test` attributes, and avoid targeting dynamic class names [source](https://github.com/apache/superset/discussions/37504). For migration: document your customizations, use CSS templates for persistence, and plan to review selectors after each major upgrade. If you need to sync custom pages with Superset’s theme mode, read the mode from `localStorage` (`superset-theme-mode`) and apply corresponding styles [source](https://github.com/apache/superset/discussions/37375). Official theming docs and the theme editor beta feature are good references for designing and exporting theme configs [source](https://github.com/apache/superset/blob/master/docs/docs/configuration/theming.mdx). <!-- 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/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/69a105a2-8405-4b60-9f9d-f34ba48de7e8?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%206.0.0%20switched%20to%20Ant%20Design%20v5%27s%20token-based%20theming%2C%20removing%20legacy%20variables%20like%20%60gridUnit%60%20and%20the%20old%20grayscale%20color%20palette.%20There%E2%80%99s%20no%20backward%20compatibility%20for%20these%20variables%E2%80%94you%E2%80%99ll%20need%20to%20manually%20update%20your%20custom%20pages%20to%20use%20the%20new%20tokens.%20For%20spacing%2C%20use%20%60sizeUnit%60%20or%20other%20Ant%20Design%20spacing%20tokens%3B%20for%20colors%2C%20use%20the%20closest%20available%20token%20%28like%20%60colorText%60%2C%20%60colorIcon%60%2C%20%60colorFill%60%2C%20etc.%29%2C%20or%20define%20a%20custom%20token%20in%20your%20theme%20config%20if%20you%20need%20something%20like%20absolute%20black%20%28%23000000%29%20%5Bsou rce%5D%28https%3A//github.com/apache/superset/pull/34732%29.%0A%0ATo%20replicate%20previous%20behaviors%2C%20you%20can%20extend%20your%20theme%20in%20%60superset_config.py%60%20by%20adding%20custom%20tokens%2C%20then%20reference%20them%20in%20your%20styled%20components.%20The%20%5BAnt%20Design%20Theme%20Editor%5D%28https%3A//ant.design/theme-editor%29%20is%20helpful%20for%20exploring%20and%20mapping%20old%20variables%20to%20new%20tokens.%20Superset%E2%80%99s%20theme%20system%20doesn%E2%80%99t%20support%20inheritance%20between%20themes%2C%20so%20you%E2%80%99ll%20need%20to%20maintain%20light/dark%20variants%20manually%20%5Bsource%5D%28https%3A//github.com/apache/superset/discussions/34647%29.%0A%0ACustom%20CSS%20overrides%20from%20earlier%20versions%20will%20likely%20break%20due%20to%20changes%20in%20class%20names%20and%20DOM%20structure.%20Use%20stable%20selectors%20like%20chart%20IDs%20or%20%60data-test%60%20attributes%2C%20and%20avoid%20targeting%20dynamic%20class%20names%20%5Bsour ce%5D%28https%3A//github.com/apache/superset/discussions/37504%29.%0A%0AFor%20migration%3A%20document%20your%20customizations%2C%20use%20CSS%20templates%20for%20persistence%2C%20and%20plan%20to%20review%20selectors%20after%20each%20major%20upgrade.%20If%20you%20need%20to%20sync%20custom%20pages%20with%20Superset%E2%80%99s%20theme%20mode%2C%20read%20the%20mode%20from%20%60localStorage%60%20%28%60superset-theme-mode%60%29%20and%20apply%20corresponding%20styles%20%5Bsource%5D%28https%3A//github.com/apache/superset/discussions/37375%29.%0A%0AOfficial%20theming%20docs%20and%20the%20theme%20editor%20beta%20feature%20are%20good%20references%20for%20designing%20and%20exporting%20theme%20configs%20%5Bsource%5D%28https%3A//github.com/apache/superset/blob/master/docs/docs/configuration/theming.mdx%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-15767706 ---- 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]
