Dark theme version that inherits light theme + overrides portions?

Support
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?

1 Like
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).

2 Likes
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);
  }
}
2 Likes
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.

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.