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

Suporte
1

Inicialmente, eu ficaria satisfeito com um esquema de cores claro e um escuro definidos dentro do meu único tema. Mas há CSS que gostaria de alterar especificamente quando o esquema de cores escuro estiver em uso.

Existe alguma maneira de configurar um tema escuro como uma espécie de tema filho, para que ele possa herdar todos os estilos do seu tema pai (claro), mas tenha seu próprio esquema de cores e consista apenas de sobrescritas do pai?

Ou algo similar?

2

Você pode compartilhar qual CSS gostaria de alterar especificamente apenas para o esquema de cores escuro? Em teoria, se forem apenas cores, você pode fazer isso usando definições de cores. Se for algo mais do que isso, será necessário usar temas separados (e você também terá que abrir mão da troca automática do modo escuro).

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!

4

Isso deveria ser common/color_definitions.scss.

E em common.css, os valores de fallback são os mesmos que o valor inicial, então você pode simplesmente usar:

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

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

Ops, obrigado. Editei minha postagem para corrigir isso.

Ah, ok. Eu li esta postagem muito rapidamente e assumi que era uma boa prática sempre incluir um fallback. Percebi que isso é apenas para compatibilidade com versões anteriores, algo que eu não preciso. Obrigado pela esclarecimento. Editei o código em minha postagem acima para refletir isso.