Versión con tema oscuro que hereda el tema claro + anula partes?

Soporte
3

Editando esta publicación para reflejar todo lo que aprendí de una vez, en lugar de aburrir a los lectores con el proceso:

Ejemplo de CSS que quiero variar entre el modo claro y el modo oscuro:

Modo claro:

.nav-pills>li>a:hover {
  &:not(.active) {
    color: var(--primary-high, $primary-high);
  }
}

Modo oscuro:

.nav-pills>li>a:hover {
  background-color: $quaternary-low-dmode;
}

Me referí a la publicación de @pmusaraj aquí, y tras algunas pruebas, hice lo siguiente:

En common/color_definitions.scss, definí variables para representar el color de fondo y el color de fuente de .nav-pills. Mi modo oscuro no especifica un color de fuente, y mi modo claro no especifica un color de fondo, pero debo especificar algo para que dark-light-choose() funcione, así que utilicé las variables del núcleo de Discourse ($primary y $quaternary-low, respectivamente):

$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};
}

Luego, el código relevante en common.scss:


// SCSS de propósito general para ambos modos: oscuro y claro:

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

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

¡Funciona!