Editing this post to reflect what I learned all at once, rather than bore readers with the process:
Example of css I want to vary between light and dark mode:
Light mode:
.nav-pills>li>a:hover {
&:not(.active) {
color: var(--primary-high, $primary-high);
}
}
Dark mode:
.nav-pills>li>a:hover {
background-color: $quaternary-low-dmode;
}
I referred to @pmusaraj’s post here, and after some experimentation, did the following:
In common/color_definitions.scss
, define variables to represent the background-color and font color of .nav-pills
. My dark mode doesn’t specify a font color, and my light mode doesn’t specify a background color, but I have to specify something for dark-light-choose()
to work, so I put the Discourse core variables ($primary
and $quaternary-low
, respectively :
$quaternary-low-dmode: #405E68;
$nav-pills: dark-light-choose($quaternary, $primary);
$nav-pills-bg: dark-light-choose($quaternary-low, $quaternary-low-dmode);
:root {
--custom-nav-pills: #{$nav-pills};
--custom-nav-pills-bg: #{$nav-pills-bg};
}
Then the relevant code in common.scss
:
// All-purpose scss for both dark and light modes:
.nav-pills>li>a:hover {
background-color: var(--custom-nav-pills-bg);
&:not(.active) {
color: var(--custom-nav-pills);
}
}
It works!