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

【问题标题】：How to use KSS effectively with a CSS designed for dark mode?如何通过为暗模式设计的 CSS 有效地使用 KSS？
【发布时间】：2021-09-02 01:46:12
【问题描述】：

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

: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，导致无法阅读的白底白字，如下所示（蓝色是我用鼠标所做的选择）：

【问题讨论】：

您是否向 KSS 的项目页面提交了错误？

标签： html css background-color darkmode knyle-style-sheet

【解决方案1】：

The official GitRepo for the KSS project was last updated in 2016 大部分提交在 8 年前完成 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 进步来更新它并留在维护跑步机上。

【讨论】：

【解决方案2】：

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

关于可能的解决方法

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

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

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

【讨论】：