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?
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.
“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.
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.
조급하게 기다리고 있습니다. 이 정보를 찾기 위해 많은 주제를 뒤져야 했습니다. 당분간 이 주제에서 제시된 제안대로 진행할 예정입니다.
색 팔레트에 더 많은 변수를 추가할 수 있는 방법이 있을까요? 현재는 미리 정의된 변수만 사용해야 하는 것 같습니다.
이것이 이미 구현되었나요?
아직은 아니지만, 진전을 이루고 있습니다. 다만 이것이 최우선 과제이므로, 앞으로 몇 주 안에 몇 가지 사항이 반영되기 시작할 것으로 예상됩니다.