Color definitions for more than light/dark color schemes

Support
1

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.

$dark-theme-ins: #1e2732;
$light-theme-ins: #e9e9e9;
$dim-theme-ins: #337733;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
    --primary-100:#{$ins};
    --primary-low:#{$ins}; 
  
}
2

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
3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.