如何通过专为暗模式设计的 CSS 有效地使用 KSS？

Question

假设我打算创建一个采用深色模式的网页。一个非常小的页面可能如下所示：

:root {
  --fg-color: white;
  --bg-color: black;
}

body {
  color: var(--fg-color);
  background-color: var(--bg-color);
}

.simple {
  border: 1px solid;
  text-align: center;
}

<html>
  <body>
    <h2 class="simple">Hello world!</h2>
  </body>
</html>

现在假设我想通过 KSS 记录它。我会在 .module 的规则集之前添加这些注释行（中间留空行）：

/*
Simple

Markup:
<h2 class="simple">some text</h2>

Styleguide Simple.simple
*/

.simple {
  border: 1px solid;
  text-align: center;
}

令我失望的是，文档库采用 color 而不是 background-color，导致白底白字难以辨认，如下所示（蓝色是选区我用鼠标制作）：

Answer 1

The official GitRepo for the KSS project was last updated in 2016 with the majority of commits made over 8 years ago in 2012-2013.

2016 年，更不用说 2013 年了，在 CSS 自定义属性得到浏览器广泛支持之前很久，所以它令人窒息也就不足为奇了 - 尽管有趣的是它似乎可以识别 color: var() 而不是 background-color: var().

我会放弃并手动记录您的 CSS。该项目似乎已经死了。 the project's author and maintainer seems more interested in funding innovative food production systems 比运行一个开源项目。

...或者您可以将其分叉并尝试使用过去 8 年的进展将其更新为 CSS 和留在维护跑步机上。

Answer 2

另一个答案清楚地说明了目前的情况：项目已经死了。

关于可能的解决方法

我发现有点有效：在 :root 而不是 body 中设置 color 和 background-color影响 KSS 文档页面，从而导致库中模块的准确表示。另一方面，KSS 特定的东西受此负面影响。但我仍然发现结果比我在问题中描述的白对白更好。

这是结果，其中深色背景适用于整个页面：

稍微好一点的方法是在 body（而不是 :root）和 .kss-modifier__wrapper 中设置 color 和 background-color：

如何通过专为暗模式设计的 CSS 有效地使用 KSS？

How to use KSS effectively with a CSS designed for dark mode?

html

css

background-color

knyle-style-sheet

darkmode