diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index e89c7ff826..13f9c3affe 100644 --- a/docs/developer-docs/latest/development/admin-customization.md +++ b/docs/developer-docs/latest/development/admin-customization.md @@ -157,7 +157,7 @@ The `config` object accepts the following parameters: | `locales` | Array of Strings | Defines availables locales (see [updating locales](/developer-docs/latest/development/admin-customization.md#locales)) | | `translations` | Object | [Extends the translations](#extending-translations) | | `menu` | Object | Accepts the `logo` key to change the [logo](#logos) in the main navigation | -| `theme` | Object | Overrides or [extends the theme](#theme-extension) | +| `theme.light` and `theme.dark` | Object | [Overwrite theme properties](#theme-extension) for Light and Dark modes | | `tutorials` | Boolean | Toggles [displaying the video tutorials](#tutorial-videos) | | `notifications` | Object | Accepts the `releases` key (Boolean) to toggle [displaying notifications about new releases](#releases-notifications) | @@ -192,14 +192,22 @@ export default { }, // Override or extend the theme theme: { - colors: { - primary100: '#f6ecfc', - primary200: '#e0c1f4', - primary500: '#ac73e6', - primary600: '#9736e8', - primary700: '#8312d1', - danger700: '#b72b1a' + // overwrite light theme properties + light: { + colors: { + primary100: '#f6ecfc', + primary200: '#e0c1f4', + primary500: '#ac73e6', + primary600: '#9736e8', + primary700: '#8312d1', + danger700: '#b72b1a' + }, }, + + // overwrite dark theme properties + dark: { + // ... + } }, // Extend the translations translations: { @@ -503,14 +511,19 @@ To disable notifications about new Strapi releases, set the `config.notification #### Theme extension -To extend the theme, use the `config.theme` key. +Strapi applications can be displayed either in Light or Dark mode (see [administrator profile setup in the User Guide](/user-docs/latest/getting-started/introduction.md#setting-up-your-administrator-profile)), and both can be extended through custom theme settings. + +To extend the theme, use either: + +- the `config.theme.light` key for the Light mode +- the `config.theme.dark` key for the Dark mode ::: strapi Strapi Design System -The default [Strapi theme](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/themes) defines various theme-related keys (shadows, colors…) that can be updated through the `config.theme` key in `./admin/src/app.js`. The [Strapi Design System](https://design-system.strapi.io/) is fully customizable and has a dedicated [StoryBook](https://design-system-git-main-strapijs.vercel.app) documentation. +The default [Strapi theme](https://github.com/strapi/design-system/tree/main/packages/strapi-design-system/src/themes) 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](https://design-system.strapi.io/) is fully customizable and has a dedicated [StoryBook](https://design-system-git-main-strapijs.vercel.app) documentation. ::: -::: note -Strapi applications can be displayed either in Light or Dark mode (see [administrator profile setup in the User Guide](/user-docs/latest/getting-started/introduction.md#setting-up-your-administrator-profile)), however custom theme extension is only applied for Light mode. When choosing Dark mode for a Strapi application, theme customizations are ignored. +::: caution +The former syntax for `config.theme` without `light` or `dark` keys is deprecated and will be removed in the next major release. We encourage you to update your custom theme to use the new syntax that supports light and dark modes. ::: ### WYSIWYG editor