Dark theme version that inherits light theme + overrides portions?

support
3

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!