Different CSS changes for different color schemes

If I understand the issue well, there’s a specific thing to do for this.

I’ve been working on a guide about this, but I’m struggling a bit to merge information so it’s clear enough to directly use the information in a theme, but still explains underlying technical stuff.

To explain how to do it the most clearly as I can…

I suggest you create a theme locally (using Install the Discourse Theme CLI console app to help you build themes will help).
Then, create a common/color_definitions.scss file in your theme, in which you write:

$my-color: dark-light-choose(#FC3468, #FF93AC);

:root {
  --my-color: #{$my-color};
}

Then, in common/common.scss, you can make use of the variable like this:

h1 {
  color: var(--my-color);
}

It will automatically pick the right color when in dark or light mode.

3 Likes