Skip to main content

v4 code migration: Updating theme customizations

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 comparison

In Strapi v3, theme customization was not supported.

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

To customize the theme in Strapi v4:

  1. Rename the ./src/admin/app.example.js file to ./src/admin/app.js.
  2. 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() {},
};
💡 Customization tips