Color definitions for more than light/dark color schemes

Hello :wave:

Discourse can handle two color schemes Light and Dark. So when you switch your device to dark mode it will use the default dark mode color scheme id site setting by default.

You can set more custom color palette to Discourse.

You can set new color palettes in /admin/customize/colors page.

or

For example if you use a custom theme than you can set these in the about.json file.
Like we use in e.g. the FKB Pro theme.

In this case it will add these color palettes to /admin/customize/colors.


When this color palettes added users can select in the user preferences interface page. If you enable it.

Screenshot 2024-01-06 at 9.43.56


dark-light-choose()

The dark-light-choose() only can handle the two color schemes light/dark, not the color palette I suggest to use it only for making custom color variables, not for override the default ones. To override the default color variables, you can do what I show above.

If the user set up a different color palette then the site default Light / Dark in the user preferences interface page then it will use the color variable you created with dark-light-choose(), for all light or dark color palette for color schemes.

This is one of the reason I made the following theme-component.

In this theme component you can separately target the color-scheme="id"s.

So what you can do is :arrow_down_small:

Make color palettes (Light, Dim, Dark)

Use the component above to make modifications on the Dim color-scheme="id" colors or other stuff, if needed.

2 Likes