# 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 (opens new window) with a brand new theme for the admin panel.

To customize the theme in Strapi v4:

Rename the ./src/admin/app.example.js file to ./src/admin/app.js.
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 (opens new window).

Example of theme customization in Strapi v4:

// path: ./src/admin/app.js

export default {
  config: {
    theme: {
      colors, shadows, sizes, …
    }
  },
  bootstrap() {},
};

1
2
3
4
5
6
7
8
9
10

💡 Customization tip