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.