不同配色方案的CSS更改

开发
1

你好！

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

最近，我遇到了这个问题：在深色模式下，包装文本的颜色与包装器相同，如果我通过 CSS 更改它，浅色主题的包装文本也会被更改，但我不想这样。

image
image318×244 5.52 KB

如何仅为一种配色方案更改 CSS？

1 个赞
2

如果您使用论坛风格指南 /styleguide/atoms/colors 中提供的颜色变量（例如：var(--primary-very-low), var(--secondary-low)），那么深色和浅色模式将能够识别不同的变量（您也可以在用于深色和浅色切换的两个颜色调色板中看到它们）。您需要启用 admin-settings 中的 styleguide enabled 设置，还有一个 styleguide admin only 设置可以将风格指南的访问权限限制为仅管理员。

2 个赞
3

问题是我已经做了不符合样式指南中颜色变量的更改（尽管我无法通过 /styleguide/atoms/colors 访问它）。有没有一种方法可以在不遵循变量的情况下进行更改？

4

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

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

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

我建议你在本地创建一个主题（使用 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);
}

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

3 个赞