Dark Mode

Windi CSS has out-of-box Dark Mode support.

By prefixing the dark: variant to the utilities, they will only apply when dark mode is enabled. With the following example, the Preview text will be red on the light mode, and green on the dark mode. Try play with it:

CSS

We have two modes for enabling dark mode, class mode and media query mode. By default, class mode is enabled.

Class mode

Class mode gives you better controls over when should the dark mode enables.

windi.config.js
export default {
  darkMode: 'class',
  // ...
}

It detects parent element's class="dark", and normally you can apply it on the html element to make it affects globally.

<html>
<body>
  <!-- Dark mode disabled -->
</body>
</html>

<html class="dark">
<body>
  <!-- Dark mode enabled -->
</body>
</html>

You can use the following snippet to make the color scheme matches with users' system preference, or write your own logic to manage it.

if (window.matchMedia('(prefers-color-scheme: dark)').matches)
  document.documentElement.classList.add('dark')
else
  document.documentElement.classList.add('light')
Config
CSS

Media query mode

In media query mode, it uses the built-in @media (prefers-color-scheme: dark) query from the browser that always matches with the users' system preference.

windi.config.js
export default {
  darkMode: 'media',
  // ...
}
Config
CSS