Dark theme version that inherits light theme + overrides portions?

Product Support

AI-generated summary

The discussion revolves around creating a dark theme that inherits styles from a light theme but overrides certain styles. paulrudy wants to set up a dark theme as a child theme to inherit all styles from the light theme but with its own color scheme and overrides.

paulrudy initially wants to alter CSS specifically for the dark color scheme. pmusaraj suggests using color definitions if it’s only colors that need to be altered, but separate themes would be required for more complex changes.

paulrudy shares an example of CSS that needs to be varied between light and dark mode. He uses dark-light-choose() to define variables for background-color and font color of .nav-pills and applies them in common.scss.

pmusaraj corrects paulrudy on the file name and suggests simplifying the code by removing fallbacks for backwards compatibility. paulrudy thanks pmusaraj for the clarification and edits the code accordingly.

1

Initially, I was happy with one light and one dark color scheme defined within my single theme. But there is CSS I’d like to alter specifically when the dark color scheme is in use.

Is there a way to set up a dark theme as a kind of child theme, so it can inherit all the styles of its parent (light) theme, but it has its own color scheme and its consists solely of overrides to the parent?

Or something similar?

2

Can you share what CSS you would specifically like to alter only for the dark color scheme? In theory, if it’s only colors, you can do this using color definitions. If it’s more than that, you will need separate themes (and you would need to also give up on automatic dark mode switching).

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!

4

This should be common/color_definitions.scss.

And in common.css, the fallbacks are the same as the initial value, so you could simply use:

.nav-pills>li>a:hover {
  background-color: var(--custom-nav-pills-bg);

  &:not(.active) {
    color: var(--custom-nav-pills);
  }
}
5

Oops, thanks, I edited my post to correct that.

Oh, ok, I had skimmed through this post too quickly, and assumed that it was best practice to always include a fallback. I realize it’s only for backwards compatibility, which I don’t need. Thanks for that clarification. I edited the code in my post above to reflect it.