Olá!
Pelo que entendi até agora, qualquer alteração no CSS é aplicada tanto ao modo claro quanto ao modo escuro, o que não faz muito sentido.
Mais recentemente, tenho que lidar com este problema: no modo escuro, o texto envolvido fica com a mesma cor do wrapper, e se eu o alterar através do CSS, o texto envolvido do tema claro também será alterado, mas eu não quero isso.
Como posso alterar o CSS apenas para um esquema de cores?
Se você usar as variáveis de cor (ou seja, var(--primary-very-low), var(--secondary-low)) disponíveis no guia de estilo do seu fórum /styleguide/atoms/colors, os modos claro e escuro deverão respeitar as diferentes variáveis (você também pode vê-las nas duas paletas de cores que está usando para o seletor claro e escuro). Você precisará habilitar a configuração styleguide enabled nas configurações do administrador, e também há a configuração styleguide admin only, que a restringe apenas aos administradores.
O problema é que já fiz alterações que não respeitaram a variável de cor definida no guia de estilo (embora eu não tenha conseguido acessá-lo por /styleguide/atoms/colors). Existe alguma maneira de fazer isso sem seguir as variáveis?
Se entendi bem o problema, há uma coisa específica a ser feita para isso.
Estive trabalhando em um guia sobre isso, mas estou tendo um pouco de dificuldade em mesclar as informações para que fiquem claras o suficiente para usar diretamente em um tema, mas ainda assim explicando os aspectos técnicos subjacentes.
Para explicar como fazer da forma mais clara que eu consigo…
Sugiro que você crie um tema localmente (usar Install the Discourse Theme CLI console app to help you build themes ajudará).
Em seguida, crie um arquivo common/color_definitions.scss em seu tema, no qual você escreve:
$my-color: dark-light-choose(#FC3468, #FF93AC);
:root {
--my-color: #{$my-color};
}
Em seguida, em common/common.scss, você pode usar a variável assim:
h1 {
color: var(--my-color);
}
Isso escolherá automaticamente a cor certa quando estiver no modo escuro ou claro.