Skip to content

Dark Mode: new custom theme extension syntax #1174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 19, 2022
Merged

Dark Mode: new custom theme extension syntax #1174

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1aa4637
Update Dark Mode documentation for new syntax
meganelacheny Sep 28, 2022
869957a
Fix caution note
meganelacheny Sep 29, 2022
4b90e2e
Improve wording
meganelacheny Oct 10, 2022
e3c4260
Improve code example for Dark Mode
meganelacheny Oct 10, 2022
043a2f8
Improve wording in config options table
meganelacheny Oct 10, 2022
2d2e1b9
Improve caution callout
meganelacheny Oct 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 25 additions & 12 deletions docs/developer-docs/latest/development/admin-customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) |

Expand Down Expand Up @@ -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: {
Expand Down Expand Up @@ -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
Comment on lines +516 to +519
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd omit that and add a comment in the above code example instead.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think a comment in the code example should replace this explanation, especially since otherwise there's no proper information about how to extend the theme in the "Theme extension" section. I'll leave this here. But I integrated all you other suggestions, thank you for your review!


::: 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
Expand Down