How to make a theme with different color palettes?

AI-generated summary

Creating a Theme with Different Color Palettes

Alex_P wants to allow users to use a theme with both light and dark colors. However, the theme currently only supports one color palette per installation. ondrej suggests using the customize option to switch to a dark theme, but Alex_P notes that this would require separate installations of the theme.

awesomerobot recommends installing the theme twice and changing the palette and theme name for each installation. This approach is easier if the theme is remote, as updates can be centrally managed.

Alternatively, JammyDodger suggests using the default dark mode color scheme id to adapt the color palette to match a browser’s preferences. Additionally, the dark/light mode toggle can be used to allow easy switching between the two modes.

I installed this theme Sam's Simple Theme, it uses light colors by default. I want to allow users to use it with dark colors. What is the best way to achieve this?

Do I need to somehow install it two times and set different color palettes? Or there are better ways?

Can you go to the theme in customize and choose your dark theme?


Do you want a light and dark colour palette for the theme?

Yeah, but the issue is that you can select only one palette per installed theme.

I wanted to make one theme available as two options, for light and dark palette.

(btw I just realized that this theme is broken with dark palette, but I guess it should be fixable by simply not hard-coding the colors)

The easiest way at the moment is to install the same theme twice and change the palette (and also the theme name, so you know which is which).

It’s easier if the theme is remote (on git) because then all updates are centrally managed anyway. If the theme was built locally in the admin interface you can export it and re-import it. The local theme method is a little more annoying because you have to edit both themes if you want to make any changes.

I think using the default dark mode color scheme id would be the way to do this now. :+1: This would adapt the colour palette to match a browser’s preferences. You can also use the Dark/Light Mode Toggle to allow easy swopping between the two.