Best practice theme.json for dark mode
-
Are there any general recommendations for structuring a block theme that supports both light and dark modes inside theme.json?
I can of course make separate variables for things like text and hover colors, but it doesn’t really work well inside the editor itself.
It would be nice if I select e.g. the “contrast” color inside the editor and then WordPress will figure out if it should select--wp--preset--color--contrastor--wp--preset--color--contrast-dark.
I feel I am missing something crucial in how theme.json works. Are there any resources on how to structure this in a WordPress theme (it feels like it should be rather trivial)?
-
As of my last knowledge update in September 2021, WordPress’s theme.json file structure does not inherently support automatic switching between light and dark modes based on a single color selection. However, I can provide you with some recommendations for structuring a block theme that supports both light and dark modes using the theme.json file.
- Color Variables: Define color variables for both light and dark modes. For instance:
{ "colors": { "primary": "#007acc", "primaryDark": "#004d80", "text": "#333", "textDark": "#fff" // ... other color variables ... } }- Color Presets: Set up color presets for both light and dark modes:
{ "color": { "presets": [ { "name": "Light Mode", "colors": { "background": "#fff", "text": "var(--color-text)", "primary": "var(--color-primary)", // ... other light mode color definitions ... } }, { "name": "Dark Mode", "colors": { "background": "#1a1a1a", "text": "var(--color-text-dark)", "primary": "var(--color-primary-dark)", // ... other dark mode color definitions ... } } ] } }- Automatic Mode Switching: While WordPress doesn’t automatically switch between light and dark modes based on a single color selection in the editor, you can define classes or data attributes that can be added to the block elements. These classes or attributes could then be used in your theme’s CSS/JavaScript to determine whether to apply the light or dark mode styles.
- Editor Styles: To provide better visual representation in the editor, you can use custom styles to preview both light and dark modes. While it won’t be automatic, it would give you a better sense of how the theme would appear in different modes.
- Resources: Although WordPress documentation is often updated, I recommend checking the official WordPress Developer Handbook or relevant forums for any recent developments or best practices related to theme.json and handling light/dark modes.
Remember that the capabilities of WordPress’s theme.json and its integration with light and dark modes might have evolved since my last update. Therefore, I recommend checking the most current resources and documentation for the latest information and best practices.
Right now I am looking for a way to create a simple dark-mode toggle to let page visitors change between the dark and light theme. My idea right now is just to point the palette-colors that should change to custom variables and then change the variables when toggling between the dark or light theme. But I really do not want to go that route if there already is a best practice to follow (I haven’t found any).
That’s nice, it should work.
In case you haven’t used it yet, there is a mechanism to declare your own CSS Custom Properties that can be leveraged for this purpose https://developer.www.ads-software.com/block-editor/reference-guides/theme-json-reference/theme-json-living/#custom
As I understand there really aren’t any public methods to access the other style-variations and make them accessible to the page users. Or have I missed something?
No, there is not. Though, creating one and exposing the variations in the front-end is a cool idea and an alternate path to the suggestion above.
Did you find a good solution for this? I’m struggling with something similar.
Here’s my process:
- I want to override –wp–preset–color–base if prefers-color-scheme: dark.
- I want this instead of creating a separate –wp–preset–color–base-dark-mode so I don’t have to change every block with css.
- But if I do it in style.css, the style engine overrides it (even with !important).
How are we supposed to do this? And I find it very, very weird that this isn’t built into Gutenberg in a simple way. Isn’t dark mode (automatic or otherwise) a pretty basic feature??
IMO. it should be trivial to either create different palettes in theme.json, or something like creating a dark-mode.json style, and being able to swap styles based on prefers-color-scheme or a toggle…
Edit 1: Is there perhaps at least a way to make sure style.css is loaded after theme.json (so it doesn’t get overridden)?
Edit 2: Heck, even the “Additional CSS” directly in the editor (added in WordPress 6.2) gets overridden!
@erlendhm I think this is a great approach to just follow the users OS: I see that being implemented this way quite a bit!
Otherwise, the easiest way is probably to set a data-attribute on the body and update this when toggling a dark/light theme toggle.
I use data-dark-mode. I then implemented the CSS classes like this:/* Set dark mode */
body[data-dark-mode="true"] {
? color-scheme: dark;
? color-scheme: dark only;
/* Add additional logic to toggle WordPress variables here */
}
/* Set light mode */
body[data-dark-mode="false"] {
? color-scheme: light;
? color-scheme: light only;
}
And thanks a lot for the kind words about my page – I should probably update this at some point. it’s been soooooo long since I have made any updates at all.
- The topic ‘Best practice theme.json for dark mode’ is closed to new replies.