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

The following example shows how to override the primary color in both JavaScript and TypeScript by customizing the light and dark theme keys in the admin config. 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.

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