Skip to main content

主题扩展

¥Theme extension

Strapi 的 管理面板 可以以浅色或夜间模式显示（参见 配置文件设置），并且两种模式都可以通过自定义主题设置进行扩展。

¥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:

  • config.theme.light 键用于灯光模式

    ¥the config.theme.light key for the Light mode

  • config.theme.dark 键用于夜间模式

    ¥the config.theme.dark key for the Dark mode

Strapi 设计系统

默认的 Strapi 主题 定义了各种主题相关的键（阴影、颜色……），可以通过 ./admin/src/app.js 中的 config.theme.light 和 config.theme.dark 键进行更新。Strapi 设计系统 是完全可定制的，并具有专用的 StoryBook 文档。

¥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:

/src/admin/app.js
export default {
  config: {
    theme: {
      light: {
        colors: {
          primary600: "#4A6EFF",
        },
      },
      dark: {
        colors: {
          primary600: "#9DB2FF",
        },
      },
    },
  },
  bootstrap() {},
}