mistercrunch commented on code in PR #34182: URL: https://github.com/apache/superset/pull/34182#discussion_r2226607216
########## docs/docs/configuration/theming.mdx: ########## @@ -10,44 +10,92 @@ version: 1 apache-superset>=6.0 ::: -Superset now rides on **Ant Design v5’s token-based theming**. +Superset now rides on **Ant Design v5's token-based theming**. Every Antd token works, plus a handful of Superset-specific ones for charts and dashboard chrome. -## 1 — Create a theme +## Managing Themes via CRUD Interface -1. Open the official [Ant Design Theme Editor](https://ant.design/theme-editor) -2. Design your palette, typography, and component overrides. -3. Open the `CONFIG` modal and paste the JSON. +Superset now includes a built-in **Theme Management** interface accessible from the admin menu under **Settings > Themes**. + +### Creating a New Theme + +1. Navigate to **Settings > Themes** in the Superset interface +2. Click **+ Theme** to create a new theme +3. Use the [Ant Design Theme Editor](https://ant.design/theme-editor) to design your theme: + - Design your palette, typography, and component overrides + - Open the `CONFIG` modal and copy the JSON configuration +4. Paste the JSON into the theme definition field in Superset +5. Give your theme a descriptive name and save You can also extend with Superset-specific tokens (documented in the default theme object) before you import. -## 2 — Apply it instance-wide +### Applying Themes to Dashboards + +Once created, themes can be applied to individual dashboards: +- Edit any dashboard and select your custom theme from the theme dropdown +- Each dashboard can have its own theme, allowing for branded or context-specific styling + +## Alternative: Instance-wide Configuration + +For system-wide theming, you can configure default themes via Python configuration: + +### Setting Default Themes ```python # superset_config.py -THEME = { - # Paste your JSON theme definition here + +# Default theme (light mode) +THEME_DEFAULT = { + "token": { + "colorPrimary": "#2893B3", + "colorSuccess": "#5ac189", + # ... your theme JSON configuration + } +} + +# Dark theme configuration +THEME_DARK = { + "algorithm": "dark", + "token": { + "colorPrimary": "#2893B3", + # ... your dark theme overrides + } +} + +# Theme behavior settings +THEME_SETTINGS = { + "enforced": False, # If True, forces default theme always + "allowSwitching": True, # Allow users to switch between themes + "allowOSPreference": True, # Auto-detect system theme preference } ``` -Restart Superset to apply changes +### Referencing CRUD Themes -## 3 — Tweak live in the app (beta) +You can also reference themes created via the CRUD interface by UUID: Review Comment: What I was thinking here is say you tell a designer: "ok go build an awesome theme for Superset", then the designer goes in and creates a great theme, now how do you set it as your default? I guess you could copy paste the theme definition into the config file manually ... The whole idea was to allow for a config to reference a non-system-defined theme directly. But if copy/paste JSON blob is fine we can remove some complexity here... I could remove all that uuid logic/stuff here if we don't think it's helpful. Maybe it's more confusing than helpful overall. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org
