Apache Superset 6.0 Unlocks Infinite Themeability

Apache Superset™ is becoming a platform that shows up everywhere—and it needs to fit in everywhere.

Whether you use Superset as your internal BI tool, embed it in your app, pop it up in a chatbot window, extend it through custom plugins/extensions, or import its components directly into your own application, Superset has to feel like it belongs.

The modern data experience isn't confined to standalone BI tools anymore. It's about bringing analytics to where people already work, in ways that feel completely natural. And that means Superset needs to be a chameleon: adapting seamlessly to any environment while maintaining its powerful capabilities.

Nobody should feel that jarring "wait, where am I?" moment when interacting with data, regardless of how or where they encounter it.

The Vision: Analytics Everywhere

That's why we've been working on making Apache Superset extremely themeable. Not just changing colors or logos, but giving you complete control over how Superset looks and feels—whether you're running open-source Superset or using Preset.

We've seen this pattern from the very beginning. At Airbnb, the team made Superset use internal brand colors from day one. At Lyft, they added a pink mustache overlaid onto the Superset logo. Throughout the community, people have been renaming and rebranding Superset in creative ways that fit their image and style, and we love to see Superset dressed in all sorts of outfits.

But here's what we've learned: while the community's creativity has been inspiring, the actual process of theming Superset has been way harder than it should be. People have been crafting ingenious solutions, writing custom CSS overrides, and doing heroic work to make things look the way they want.

Three Key Patterns Where Theming Is Critical

Embedded Analytics: Organizations want to bring analytics directly into their applications. Think customer-facing dashboards in SaaS platforms, operational metrics embedded in admin panels, or real-time KPIs woven into mobile apps. These aren't standalone BI tools—they're analytics that live and breathe as part of a larger product experience.

White-label BI Experiences: Companies want to offer their users a full-featured analytics platform that looks and feels like it was built specifically for them. Whether you're a consultancy delivering client portals, an enterprise offering departmental analytics, or a platform providing analytics-as-a-service, you need complete visual control.

Component Library: Increasingly, developers are importing Superset components directly into their own applications—SaaS apps, mobile apps, chatbot sessions, and beyond. They're not embedding the whole platform; they're picking and choosing the pieces they need and weaving them into their own experiences.

In all cases, the expectation is the same: a polished, tailored, on-brand experience that feels native rather than third-party.

Building on Ant Design v5

We've been using Ant Design since v4. When Ant Design v5 introduced its sophisticated, dynamic theming system, it gave us the foundation we needed.

Ant Design v5's theming capabilities include:

• CSS-in-JS with dynamic token system — Real-time theme switching without page reloads
• Design tokens architecture — Semantic color palettes that automatically generate variants
• Component-level customization — Granular control over individual component styling
• Algorithm-based theme generation — Intelligent color computation for accessibility and consistency
• Hierarchical theme injection — Multiple themes can coexist on the same page

Getting theming semantics right is challenging—it's a balancing act between configurability and good defaults. Ant Design v5 struck this balance well, giving us a solid foundation for analytics theming.

The Great Migration: From Complexity to Clarity

Migrating from one theming system to another is a significant undertaking. Superset's theming story had become... layered. We were working with legacy Bootstrap remnants, custom Emotion styling, and Ant Design v4, creating technical debt that had accumulated while the frontend world evolved rapidly around us.

Before this migration, theming Superset required deep technical knowledge. You'd need to work with .less and CSS files, navigate specificity conflicts, then rebuild the entire JavaScript bundle just to see your changes.

Want to learn more about CSS theming in Superset? Check out Customizing Superset Dashboards with CSS for the fundamentals, and Additional Tips and Tricks for advanced techniques. CSS still has its place alongside the new token system—more on that later.

Dynamic theming simply wasn't possible. Each Superset instance was locked to a single theme. Even if you customized the rudimentary SupersetTheme object, it was only a partial solution—the styling was not comprehensive across the UI, there was no live theme switching, no way to respect OS-level dark mode preferences, and no way for different dashboards to have their own themes.

This migration gave us the chance to simplify and fully embrace Ant Design v5. The result? Dynamic theming backed by what we think is the greatest component library ever built.

What's New in Superset 6.0

Superset 6.0 brings a complete theming overhaul. Here's what changed:

Dynamic Theming at Runtime

Themes are no longer baked into your build. The revised CSS-in-JS system enables:

• Switch themes instantly without page reloads
• Apply different themes to different dashboards in the same instance
• Let users choose their preferred theme (including respecting OS dark mode preferences)
• Pass themes dynamically via the Embedded SDK

Theme Management: Code or UI, Your Choice

Choose how you want to manage your themes based on your workflow:

Infrastructure as Code — Define themes directly in superset_config.py for version control and deployment automation:

THEME_DEFAULT = {
    "token": {
        "colorPrimary": "#269393",
        "colorSuccess": "#5AC189",
        "colorWarning": "#FCC700",
        "colorError": "#E04355",
        "fontFamily": "'Inter', Helvetica, Arial"
    }
}

Visual Management — Enable the full CRUD interface for creating and managing themes through the UI:

ENABLE_UI_THEME_ADMINISTRATION = True

Both approaches can coexist—define base themes in code, then refine them through the UI.

System-Level Theme Architecture

Superset theming now supports multiple theme strategies at the instance level:

1. Single Theme: Set one theme for your entire Superset instance
2. Light/Dark Mode: Define both light and dark system themes, letting users choose:
   • Light mode
   • Dark mode (because in 2026, it's no longer optional—it's expected)
   • Match OS settings (automatically follows system preferences)

Yes, dark mode is finally here. After years of community requests, Superset 6.0 delivers true dark mode support—not a hacky CSS override, but a first-class theming feature that respects your OS preferences and works across the entire application.

3. Dashboard-Specific: Override system themes at the dashboard level for specialized use cases

Design Token System

Building on Ant Design v5's token architecture, we now expose:

• Seed, Map, and Alias tokens — The full Ant Design token hierarchy, from foundational values to semantic mappings
• Algorithm-based generation — Intelligent color variants for hover states, disabled elements, and more
• Superset-specific tokens — Custom tokens for brand logos, fonts, and analytics-specific UI elements

Superset-Specific Tokens

Custom Fonts and Security

When using external fonts via fontUrls, you may need to configure Content Security Policy (CSP) headers. Add font domains to your TALISMAN_CONFIG:

TALISMAN_CONFIG = {
    "content_security_policy": {
        "style-src": ["'self'", "'unsafe-inline'", "https://fonts.googleapis.com"],
        "font-src": ["'self'", "https://fonts.gstatic.com"],
    }
}

Alternatively, self-host fonts to avoid CSP complexity:

THEME_DEFAULT = {
    "token": {
        "fontFamily": "'CustomFont', sans-serif",
        "fontUrls": ["/static/assets/fonts/custom-font.woff2"]
    }
}

Complete Component Coverage

The new theming system touches every corner of Superset:

• Navigation and menus
• Charts and visualizations (including ECharts and AG-Grid)
• Forms and inputs
• Modals and overlays
• Loading states with customizable spinners

Custom Loading Spinners

While the new stock spinner looks amazing, you can customize it—replace it with something more aligned with your brand, a custom GIF, or any SVG. Even the loading states can match your brand.

Fine-Grained Chart Theming

Given that ECharts is our primary charting library, we offer granular controls. Apply global styling overrides to all ECharts visualizations using echartsOptionsOverrides:

{
  "echartsOptionsOverrides": {
    "grid": {
      "left": "10%",
      "right": "10%"
    },
    "tooltip": {
      "backgroundColor": "rgba(0, 0, 0, 0.8)",
      "textStyle": { "color": "#fff" }
    }
  }
}

For chart-specific overrides targeting individual visualization types, see the Preset Theming Guide for details on echartsOptionsOverridesByChartType.

Embedded Analytics: Theming for Your App

When embedding Superset dashboards, themes can be passed dynamically based on your host application's context. Users won't know they're looking at Superset—it becomes a seamless extension of your application.

Embedding with Theme Configuration

embedDashboard({
  id: "dashboard-id",
  supersetDomain: "https://your-instance.example.com",
  mountPoint: document.getElementById("dashboard"),
  fetchGuestToken: () => fetchToken(),
  dashboardUiConfig: {
    theme_default: {
      token: {
        colorPrimary: "#2893B3",
        fontFamily: "Inter, sans-serif"
      }
    },
    theme_dark: {
      algorithm: "dark",
      token: {
        colorPrimary: "#2893B3"
      }
    }
  }
});

Dynamic Theme Switching

Switch themes programmatically after embedding:

// Switch to dark theme
dashboard.setThemeMode('dark');

// Switch to default theme
dashboard.setThemeMode('default');

// Follow OS preference
dashboard.setThemeMode('system');

Note: setThemeMode() requires both theme_default and theme_dark to be configured in the embed options.

Theme Gallery: Ready-to-Use Examples

Need inspiration? Check out the Preset Theme Gallery for pre-built themes with copy-paste JSON configurations.

Migration Guide: Tokens + CSS Working Together

The Best of Both Worlds

If you've been theming Superset with CSS overrides, here's the good news: most of that work can now be simplified with design tokens. But that doesn't mean CSS is going away—far from it.

Important heads up: As we migrated from Ant Design v4 to v5, some CSS selectors may have changed. This is a good opportunity to audit your customizations and decide what belongs in themes vs. CSS.

The new theming system handles the systematic styling—colors, typography, spacing, component variants. But CSS remains a powerful, precise tool for targeted customizations that tokens don't cover.

Recommended Migration Path

1. Audit — Review CSS-customized dashboards as you migrate to 6.0
2. Categorize — Identify what can move to tokens vs. what needs CSS
3. Create — Build your theme in JSON, version control it
4. Refine — Keep targeted CSS for specialized needs
5. Test — Deploy with confidence

CSS: Still Powerful, Still Relevant

CSS provides a surgical precision that design tokens intentionally don't:

• CSS templates — Apply consistent styles across multiple dashboards
• Per-dashboard styles — Unique customizations for specific use cases
• Advanced selectors — Target specific chart types, states, or contexts
• Custom animations — Add motion and polish beyond token capabilities

Pro tip: Use tokens for your design system foundation, then layer targeted CSS on top for the finishing touches. This hybrid approach gives you maintainability and flexibility.

For comprehensive CSS techniques, see our detailed guide: Customizing Apache Superset Dashboards with CSS.

Developer Experience

Visual Theme Design

The Ant Design Theme Editor lets you visually design themes and export JSON configurations directly to Superset. No more guessing hex codes or fighting with CSS specificity.

Testing Themes

1. From the Theme Modal: Click "⚡ Apply" to preview
2. From the Themes Page: Hover and click the "⚡" icon

Local application affects only your session—test thoroughly before deploying workspace-wide.

Export/Import Themes

Share themes between instances or version control them:

Export via UI:

1. Navigate to Settings > Themes
2. Click the export icon in the Actions column
3. Download the YAML file

Import via UI:

1. Navigate to Settings > Themes
2. Click the import icon in the header bar
3. Upload your YAML file

Themes can also be managed programmatically via the REST API.

AI-Assisted Theme Generation

It turns out that Ant Design is well-documented and AIs are pretty good at crafting themes for you. Try asking your favorite AI to extract your brand colors from your website and assemble a theme. Might need some touchups but can easily get you 80-90% of the way there.

What's Next

On the Wishlist

• GUI Theme Editor — Design themes directly in Superset without leaving the app
• Theme Sharing — Discover and share community themes
• Conditional Theming — Themes that adapt based on data, time of day, or user preferences
• Component Library Export — Use themed Superset components in your own React applications

Extensions as Themes

With our new extension system, themes can be packaged and distributed as plugins, making it easier than ever to share and reuse themes across organizations.

Getting Started

Quick Start

1. Update to Superset 6.0 (Preset customers already have it!)
   • Official Source Release
   • PyPI Package
   • Changelog
   • Upgrade Instructions
2. Enable theme administration: ENABLE_UI_THEME_ADMINISTRATION = True
3. Design your theme:
   • Use the Ant Design Theme Editor, or
   • Ask an AI to craft an Ant Design-compatible theme
4. Navigate to Settings → Themes
5. Click "+" and paste your JSON
6. Hit "Apply" and watch Superset transform

Resources

Documentation

• Apache Superset Theming Docs — Official open-source documentation
• Preset Theming Guide — Managed Superset guide
• Theming Token Library — Complete token reference
• Theme Gallery — Pre-built themes with downloadable configs

Design Tools

• Ant Design Theme Editor — Visual designer
• Ant Design Token Docs — All available tokens

Videos

• Live Demo: Theming Apache Superset

Community Collaboration

This work wouldn't have been possible without the Apache Superset community. From the early days when teams at Airbnb and Lyft first started customizing Superset's appearance, to today's sophisticated theming system, it's been a journey of continuous innovation.

Special recognition goes to the teams who've been pushing the boundaries of Superset theming. Your feedback, pull requests, and creative solutions shaped every aspect of this system. The migration to Ant Design v5 touched nearly every component in the codebase. The community's patience, testing, and contributions were invaluable.

Thanks also to the Ant Design team for their robust theming foundation!

Closing Thoughts

Superset 6.0's theming system represents a fundamental shift. You no longer need to accept a one-size-fits-all solution. The platform can now adapt to your brand, your style, your requirements.

Whether you're embedding dashboards, white-labeling for clients, importing components into your app, or just want dark mode, Superset 6.0 delivers.

Let's see what you build with it.