Theme extension#

Extend the Strapi admin panel theme for light and dark modes by customizing config.theme.light and config.theme.dark keys in /src/admin/app.js to override colors and other design system properties.

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() {},
}