Theme extension#

Strapi's admin panel can be displayed either in light or dark mode (see profile setup), and both can be extended through custom theme settings.

To extend the theme, use either:

• the config.theme.light key for the Light mode
• the config.theme.dark key for the Dark mode

:::strapi Strapi Design System

The default defines various theme-related keys (shadows, colors…) that can be updated through the config.theme.light and config.theme.dark keys in ./admin/src/app.js. The is fully customizable and has a dedicated documentation.
:::

The following example shows how to override the primary color by customizing the light and dark theme keys in the admin panel configuration:

export default {
  config: {
    theme: {
      light: {
        colors: {
          primary600: "#4A6EFF",
        },
      },
      dark: {
        colors: {
          primary600: "#9DB2FF",
        },
      },
    },
  },
  bootstrap() {},
}

export default {
  config: {
    theme: {
      light: {
        colors: {
          primary600: '#4A6EFF',
        },
      },
      dark: {
        colors: {
          primary600: '#9DB2FF',
        },
      },
    },
  },
  bootstrap() {},
}