不同配色方案的CSS更改

[Canapin (Coin-coin le Canapin)]

@Renato_Mendes

据我目前所理解，任何对 CSS 的更改都会同时应用于浅色和深色模式，这似乎不太合理。

如果我理解得没错，这有一个特定的处理方法。

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…

我一直在写一篇关于这个问题的指南，但我在整合信息方面遇到了一些困难，既要足够清晰以便直接在主题中使用，又要解释底层的技术细节。

为了尽可能清晰地解释如何操作……

我建议你在本地创建一个主题（使用 Install the Discourse Theme CLI console app to help you build themes 会有所帮助）。
然后在你的主题中创建一个 common/color_definitions.scss 文件，并在其中写入：

$my-color: dark-light-choose(#FC3468, #FF93AC);

:root {
  --my-color: #{$my-color};
}

然后，在 common/common.scss 中，你可以像这样使用这个变量：

h1 {
  color: var(--my-color);
}

它会自动选择在深色或浅色模式下正确的颜色。