CSS and Theming

Themes are the recommended way to customize your Preset dashboards. CSS is more likely to break with future updates, so it should only be used as a fallback for edge cases.

When to Use CSS

In most cases, you should use themes for customization. CSS should only be used when:

• You're customizing a non-ECharts chart type that doesn't support theme-level styling
• You need to style a single specific chart differently from other charts of the same type
• You want to hide or show specific elements on a dashboard

Why Themes Are Preferred

• More maintainable and less brittle: CSS selectors can change between releases, theme tokens are stable
• Easier to manage: All styling lives in one JSON configuration
• Better dark mode support: Themes handle light/dark mode automatically

If you're unsure whether to use CSS or themes for a particular customization, try the theme approach first.

Migrating from CSS to Themes

If you have existing CSS customizations, we recommend migrating them to themes.

Migration Workflow

1. Review your current CSS: Open your dashboard's CSS editor and identify what each rule is customizing (colors, spacing, typography, etc.)

2. Find the corresponding theme token: Visit the Ant Design Theme Editor to explore available tokens. Common mappings include:

   • Background colors → colorBgBase, colorBgContainer
   • Text colors → colorTextBase, colorText
   • Primary brand color → colorPrimary
   • Border radius → borderRadius

3. Add the token to your theme: Update your theme's JSON configuration with the appropriate token and value. Read more about how to create your theme here

4. Remove the CSS rule: Delete the corresponding line(s) from your dashboard's CSS. Remember that CSS takes precedence over themes, so the CSS must be removed for the theme changes to take effect.

5. Test the result: Verify the styling looks correct in both light and dark modes (if applicable)

CSS Selector Mapping

Some CSS selectors have changed with the theming release. Please see the table below for updated selectors to use.
Tip: You can add both the old and new selectors to your dashboard CSS before the theming release so your styling will work as soon as your workspace is upgraded.