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

Question

Suppose I intend to create a web page emplying dark mode. A very minimal page could look like this:

: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>

Now let's say I want to document it via KSS. I'd add these lines of comment before .module's ruleset (leaving an empty line in between):

/*
Simple

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

Styleguide Simple.simple
*/

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

What disappoints me is that the documenation library takes the color but not the background-color, resulting in an unreadably white-on-white, as you can see below (the blue is a selection I made with the mouse):

Have you filed a bug with KSS's project page? – Dai Aug 31 '21 at 19:54 — Dai, Aug 31 '21 at 19:54

score 1 · Accepted Answer · answered Aug 31 '21 at 19:57

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, let alone 2013, was long before CSS Custom Properties were widely supported by browsers so it's no surprise that it's choking - though it's interesting that it seemed to recognize color: var() but not background-color: var().

I'd call-it-quits and just document your CSS manually. The project seems dead. And the project's author and maintainer seems more interested in funding innovative food production systems than running an open-source project.

...or you could fork it and try to update it with the past 8 years of advances to CSS and stay on the maintenance treadmill.

Enlico · Answer 2 · 2021-09-01T17:46:12.303

The other answer clearly explains the current situation: the project is dead.

For what concerns possible workarounds

I've found one that kinda works: setting color and background-color in :root rather than in body affects the KSS documentation page, thus resulting in accurate representation of the modules in the library. On the other hand, the KSS-specific stuff is negatively affected by this. But I still find the result better than having white on white as I described in the question.

Here's the result, where the back ground dark color applies to the whole page:

One that works slightly better consists in setting color and background-color both in body (not in :root) and .kss-modifier__wrapper:

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

2 Answers2