How to custom Superset looks and theme

[ptdtan]

Hi @dosu, I'm new to Superset, how can I custom Superset looks and theme to fit my branding?

[dosubot[bot]]

Hey @ptdtan! I'm here to help you with Superset customization and any other questions you might have. Let's get started!

To customize the appearance and theme of Superset to fit your branding, you can modify the defaultTheme object in the superset-frontend/packages/superset-ui-core/src/style/index.tsx file. This object contains properties that define the visual aspects of the application, such as colors and typography.

For example, to change the primary color scheme, update the primary color object:

const defaultTheme = {
  colors: {
    primary: {
      base: '#20A7C9', // Change this to your brand's primary color
      // other color variations
    },
    // other color objects
  },
  // other properties
};

You can also adjust typography settings to match your brand's font styles:

typography: {
  families: {
    sansSerif: `'Inter', Helvetica, Arial`, // Change to your brand's font
    // other font settings
  },
  // other typography settings
},

Additionally, you can use the THEME_OVERRIDES configuration in the superset/config.py file to apply custom themes. This allows you to define specific theme properties such as border radius and color schemes:

THEME_OVERRIDES = {
  "borderRadius": 4,
  "colors": {
    "primary": {
      "base": 'red', // Change this to your brand's primary color
    },
    // other color settings
  }
}

By modifying these properties, you can align Superset's appearance with your brand's visual identity ^[1][2].

To continue talking to Dosu, mention @dosu.

[kaimu-kun]

@dosu Can I also change the font using THEME_OVERRIDES?