Skip to main content

v4 代码迁移：更新主题定制

¥v4 code migration: Updating theme customizations

本指南是 v4 代码迁移指南 的一部分，旨在帮助你将 Strapi 应用的代码从 v3.6.x 迁移到 v4.0.x

¥This guide is part of the v4 code migration guide designed to help you migrate the code of a Strapi application from v3.6.x to v4.0.x

🤓 v3/v4 比较

在 Strapi v3 中，不支持主题自定义。

¥In Strapi v3, theme customization was not supported.

Strapi v4 为 Strapi 设计系统 引入了全新的管理面板主题。

¥Strapi v4 introduces the Strapi Design System with a brand new theme for the admin panel.

要在 Strapi v4 中自定义主题：

¥To customize the theme in Strapi v4:

  1. 将 ./src/admin/app.example.js 文件重命名为 ./src/admin/app.js。

    ¥Rename the ./src/admin/app.example.js file to ./src/admin/app.js.

  2. 在 ./src/admin/app.js 中，在 config.theme 对象中声明新的键/值对，更新 默认主题 的设计元素（例如颜色、阴影、大小）。

    ¥In ./src/admin/app.js, declare new key/value pairs in the config.theme object, updating the design elements (e.g. colors, shadows, sizes) of the default theme.

Example of theme customization in Strapi v4:
./src/admin/app.js

export default {
  config: {
    theme: {
      colors, shadows, sizes, …
    }
  },
  bootstrap() {},
};
💡 定制技巧