Theme extension

Page summary:

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 Design System

The default Strapi theme 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 Strapi Design System is fully customizable and has a dedicated StoryBook documentation.

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

JavaScript

/src/admin/app.js

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

TypeScript

/src/admin/app.ts

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