Table of contents

HotDocs: Light / Dark 🔜

INFO

Light / Dark is currently under development. You can chime in on this GitHub discussion to share wishes and feedback.

The Light / Dark theme is implemented with Css variables and a data attribute on <html>:

  • <html data-theme="light">
  • <html data-theme="dark">

Implementation

Each component in hot_docs.css comes with variables for both themes.

For example, the .footer styles start with:

:root {
  --footer-background-color: #e9e9e9;
}

[data-theme=dark]:root {
  --footer-background-color: #444444;
}
Edit this page