主题扩展

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

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

Strapi Design System

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

以下示例展示了如何通过自定义 管理面板配置 中的浅色和深色主题键来覆盖主颜色：

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