Hi, I would like to know how to set color definitions for more than one color scheme i.e Light, Dark, Dim similar to how twitter works.
My current issue:
I’m currently able to style the default light and dark colors that are not listed such as primary-low in a custom theme component but unaware of how to add this custom color mode to a different color scheme.
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.
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.
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.