Diferentes alterações CSS para diferentes esquemas de cores

[Canapin (Coin-coin le Canapin)]

@Renato_Mendes

Pelo que entendi até agora, qualquer alteração em CSS é aplicada tanto ao modo claro quanto ao escuro, o que não faz muito sentido.

Se entendi bem o problema, há uma coisa específica a ser feita para isso.

Update themes and plugins to support automatic dark mode

Great question, I tried this and noticed that we didn’t properly support using background images or theme variables in the special color definitions stylesheet. So I made some fixes in core, and you should be able to do this now (make sure you pull the latest core). So, if you have two images in your theme or theme component, with SCSS vars of $bg-light and $bg-dark respectively, you can add this to your color_definitions.scss stylesheet: $bg: url(dark-light-choose($bg-light, $bg-dark)); :ro…

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.