I’m a bit confused by how custom themes support color palettes for light and dark mode. When I edit a new theme and select a palette, I can only select one. When I previewed, and I’m using Dark Mode, I didn’t see the color palette. When I switched my settings (OS settings) to light mode, I could see the custom palette. So I guess the question is - if a theme can only select one palette, how do I ‘bind’ the new theme to custom palette X for light more and custom palette Y for dark mode?
1 Like
Under your user preferences, you may have set the dark mode color scheme to a different one than the default.
You can view all color palettes at /admin/customize/colors, I believe.
Currently, sites need to have a colour scheme selected as the dark mode colour scheme - it isn’t built into the colour palette system to have two modes.
We are, however, deep into work that will make this much more intuitive and include native light and dark modes for all themes, with user preference deciding which they will see. We don’t have an ETA for these updates just yet, but we’re very far along with it and hope to have light and dark modes for colour palettes (along with other related improvements) out soon.
4 Likes
“We are, however, deep into work that will make this much more intuitive and include native light and dark modes for all themes, with user preference deciding which they will see.”
But to be clear, if I don’t want to offer options to the user, just have a site light/dark color scheme, that will be possible, right?
I’m still a bit confused. Are you saying a theme will use a custom selected color scheme for LIGHT mode, and for DARK it does… something else? If I could edit the default DARK mode, that would work as I don’t need N themes users can pick from. If this works, how do I know which scheme to edit?
Yes, it is.
You create two color palettes (or customize existing ones). I created my ‘Pink’ color palette based on the WCAG light palette and my ‘Dark Pink’ color palette by customizing the WCAG dark palette. I assume you don’t want your users to select the dark color palette also for light mode; then I would ensure that color palette can be selected by users is disabled. If that’s disabled on all palettes, the dropdown in the users’ interface preferences disappears.
Then your users will only see
Instead of the color selector you see in your preferences here at Meta.
You set your dark palette as the site-wide default color palette for dark mode in the default dark mode color scheme ID site setting.
And you put the light palette into the color palette setting of your theme.
The current limitation is that I cannot easily create two more palettes e.g., a light and a dark blue one and let the users choose between pink and blue. While the light color palette which is connected to the theme works fine, I cannot have a different default dark palette for that theme. But as long as you want only one light and one dark color palette, the current options are enough for you.
4 Likes
Thanks, will give this a try!
Yes, with the upcoming light and dark palette support, this will be easy to do. As @Moin points out, this kind of thing is already possible, but it’s not the most intuitive way of doing it.
With the upcoming changes, all palettes will have a light and a dark mode as part of the palette. That includes colour palettes that come with themes, as well as those you can create and edit in the admin. You will be able to choose defaults as needed.
3 Likes