From 1aa46377a9b69ed23e53f012b5b16c7a43627e0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9gane=20Lacheny?= Date: Wed, 28 Sep 2022 18:32:15 +0200 Subject: [PATCH 1/6] Update Dark Mode documentation for new syntax --- .../latest/development/admin-customization.md | 33 +++++++++++-------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index e89c7ff826..6a38328dda 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 | Override or [extend the theme](#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,16 @@ export default { }, // Override or extend the theme theme: { - colors: { - primary100: '#f6ecfc', - primary200: '#e0c1f4', - primary500: '#ac73e6', - primary600: '#9736e8', - primary700: '#8312d1', - danger700: '#b72b1a' - }, + light: { + colors: { + primary100: '#f6ecfc', + primary200: '#e0c1f4', + primary500: '#ac73e6', + primary600: '#9736e8', + primary700: '#8312d1', + danger700: '#b72b1a' + }, + } }, // Extend the translations translations: { @@ -503,14 +505,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 development. + +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 `config.theme` to extend the theme will soon be deprecated by Strapi, and will stop being supported when the next major release is available. Make sure to update any custom theme new, using the new syntax that supports custom development for both Light and Dark modes. ::: ### WYSIWYG editor From 869957a55a3cdd7e5490eb742b926ff5b6cf2a83 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9gane=20Lacheny?= Date: Thu, 29 Sep 2022 11:36:19 +0200 Subject: [PATCH 2/6] Fix caution note --- docs/developer-docs/latest/development/admin-customization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index 6a38328dda..fd9321d90d 100644 --- a/docs/developer-docs/latest/development/admin-customization.md +++ b/docs/developer-docs/latest/development/admin-customization.md @@ -517,7 +517,7 @@ The default [Strapi theme](https://github.com/strapi/design-system/tree/main/pac ::: ::: caution -The former syntax `config.theme` to extend the theme will soon be deprecated by Strapi, and will stop being supported when the next major release is available. Make sure to update any custom theme new, using the new syntax that supports custom development for both Light and Dark modes. +The former syntax `config.theme` to extend the theme will soon be deprecated by Strapi, and will stop being supported when the next major release is available. We encourage you to update any custom theme using the new syntax that supports custom development for both Light and Dark modes. ::: ### WYSIWYG editor From 4b90e2e4630172710720cff3d376697934651b79 Mon Sep 17 00:00:00 2001 From: meganelacheny Date: Mon, 10 Oct 2022 15:09:37 +0200 Subject: [PATCH 3/6] Improve wording Co-authored-by: Gustav Hansen --- docs/developer-docs/latest/development/admin-customization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index fd9321d90d..dc745b05a1 100644 --- a/docs/developer-docs/latest/development/admin-customization.md +++ b/docs/developer-docs/latest/development/admin-customization.md @@ -505,7 +505,7 @@ To disable notifications about new Strapi releases, set the `config.notification #### Theme extension -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 development. +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: From e3c4260a06267b33016201e03bb741b1fdf8ddcb Mon Sep 17 00:00:00 2001 From: meganelacheny Date: Mon, 10 Oct 2022 15:10:02 +0200 Subject: [PATCH 4/6] Improve code example for Dark Mode Co-authored-by: Gustav Hansen --- .../latest/development/admin-customization.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index dc745b05a1..79872d90ac 100644 --- a/docs/developer-docs/latest/development/admin-customization.md +++ b/docs/developer-docs/latest/development/admin-customization.md @@ -192,6 +192,7 @@ export default { }, // Override or extend the theme theme: { + // overwrite light theme properties light: { colors: { primary100: '#f6ecfc', @@ -201,6 +202,11 @@ export default { primary700: '#8312d1', danger700: '#b72b1a' }, + }, + + // overwrite dark theme properties + dark: { + // ... } }, // Extend the translations From 043a2f83257d8bd767280231918f2cf4714a1684 Mon Sep 17 00:00:00 2001 From: meganelacheny Date: Mon, 10 Oct 2022 15:11:58 +0200 Subject: [PATCH 5/6] Improve wording in config options table Co-authored-by: Gustav Hansen --- docs/developer-docs/latest/development/admin-customization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index 79872d90ac..f9157cb9c4 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.light` and `theme.dark` | Object | Override or [extend the theme](#theme-extension) for Light and Dark modes | +| `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) | From 2d2e1b9caf93fbec4e5879372e4a70f56250a0b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?M=C3=A9gane=20Lacheny?= Date: Mon, 10 Oct 2022 15:17:02 +0200 Subject: [PATCH 6/6] Improve caution callout --- docs/developer-docs/latest/development/admin-customization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/developer-docs/latest/development/admin-customization.md b/docs/developer-docs/latest/development/admin-customization.md index f9157cb9c4..13f9c3affe 100644 --- a/docs/developer-docs/latest/development/admin-customization.md +++ b/docs/developer-docs/latest/development/admin-customization.md @@ -523,7 +523,7 @@ The default [Strapi theme](https://github.com/strapi/design-system/tree/main/pac ::: ::: caution -The former syntax `config.theme` to extend the theme will soon be deprecated by Strapi, and will stop being supported when the next major release is available. We encourage you to update any custom theme using the new syntax that supports custom development for both Light and Dark modes. +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