Table of contents

HotDocs: Light / Dark

The Light / Dark color scheme is implemented with Css variables and a check on what scheme is currently selected (see .scheme).

Styling your own content

When styling your docs, use Css variables to support both light and dark color schemes.

For example, here is a COMPONENT that uses different background colors:

:root {
  --COMPONENT-background-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --COMPONENT-background-color: #000000;
  }
}

:root:has(#scheme-light:checked) {
  --COMPONENT-background-color: #ffffff;
}

:root:has(#scheme-dark:checked) {
  --COMPONENT-background-color: #000000;
}

.COMPONENT {
  background-color: var(--COMPONENT-background-color);
}

Edit this page