Search code examples
htmlcssbackground-colordarkmodeknyle-style-sheet

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

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): enter image description here

Solution

  • 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.