Versão com tema escuro que herda o tema claro + substitui partes?

Suporte
3

Editando este post para refletir o que aprendi de uma vez só, em vez de entediar os leitores com o processo:

Exemplo de CSS que quero variar entre o modo claro e o modo escuro:

Modo claro:

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

Modo escuro:

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

Consultei a postagem do @pmusaraj aqui e, após algumas experimentações, fiz o seguinte:

Em common/color_definitions.scss, defini variáveis para representar o background-color e a cor da fonte de .nav-pills. Meu modo escuro não especifica uma cor de fonte, e meu modo claro não especifica um background-color, mas preciso especificar algo para que dark-light-choose() funcione, então usei as variáveis do núcleo do Discourse ($primary e $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};
}

Em seguida, o código relevante em common.scss:


// SCSS de uso geral para os modos escuro e claro:

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

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

Funciona!