Como alterar a cor CSS para uma única paleta de temas?

[Nacho_Caballero]

Atualmente, tenho um único tema com duas paletas (uma clara e uma escura). Estou 90% satisfeito com a paleta escura, mas em alguns casos gostaria de fazer correções.

Por exemplo, não há contraste suficiente entre as cores de fundo e de primeiro plano para os sussurros na paleta escura:

.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

Sei que posso sobrescrever o CSS, mas se eu alterá-lo para var(--primary-light), isso também afetará a paleta clara.

Existe alguma maneira de direcionar uma única paleta ou a melhor prática é criar dois temas diferentes, cada um com sua própria paleta?

Meu problema com essa segunda abordagem é que teria que começar a duplicar muitas outras personalizações que não têm nada a ver com cor.

[Johani (Joe)]

Claro, existem algumas funções SCSS que você pode usar para verificar se está em um esquema de cores claro ou escuro.

app/assets/stylesheets/common/foundation/variables.scss

Você as usa assim.

@if is-light-color-scheme() {
  // CSS para esquema de cores claro
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS para esquema de cores escuro
  h1 {
    color: red;
  }
}

[Nacho_Caballero]

Obrigado por apontar isso, @Johani. Parece que a função dark-light-choose($light, $dark) faz exatamente o que eu quero, mas meu problema agora é que ela não está detectando a mudança de paleta.

Meu único tema ativo se chama “Nacho” e possui duas paletas: “Clara” (Light) e “Oscura” (Dark):

Eu o personalizei com este CSS:

$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
    ins {
        background: dark-light-choose($light-theme-ins, $dark-theme-ins);
    }
}

Isso funciona com a paleta clara:

Mas não funciona com a paleta escura:

Se eu alterar o CSS para isto, funciona:

.modal.history-modal {
    ins {
        background: $dark-theme-ins;
    }
}

Então parece que a mudança para a paleta escura não está sendo detectada. Posso ver que is-light-color-scheme verifica o brilho de $primary e $secondary. Aqui está minha paleta escura:

E a paleta clara:

Já esgotei todas as minhas ideias.

[Nacho_Caballero]

Isso foi corrigido aqui: Why might dark-light-choose() not work? - #2 by awesomerobot