Logo Windi CSS

Темный режим

Windi CSS имеет встроенную поддержку темного режима.

Если указать утилит перед вариантом dark: , они будут применяться только при включенном темном режиме. В следующем примере текст Preview будет красным в светлом режиме и зеленым в темном режиме. Попробуйте поиграть с этим:

CSS
У нас есть два режима для включения темного режима: режим класса и режим медиа-запроса. По умолчанию включен режим class.
Режим класса 
Режим класса дает вам лучший контроль над тем, когда должен включаться темный режим.
windi.config.js
export default {
  darkMode: 'class',
  // ...
}

Он обнаруживает родительский элемент class="dark", и обычно вы можете применить его к элементу html, чтобы он повлиял глобально.
<html>
<body>
  <!-- Темный режим отключен -->
</body>
</html>

<html class="dark">
<body>
  <!-- Темный режим включен -->
</body>
</html>

Вы можете использовать следующий фрагмент, чтобы согласовать цветовую схему с системными предпочтениями пользователей, или написать свою собственную логику для управления ею.
if (window.matchMedia('(prefers-color-scheme: dark)').matches)
  document.documentElement.classList.add('dark')
else
  document.documentElement.classList.add('light')

Конфиг
CSS
Режим медиа-запроса 
В режиме мультимедийных запросов он использует встроенный запрос @media (prefers-color-scheme: dark) из браузера, который всегда соответствует системным предпочтениям пользователей.
windi.config.js
export default {
  darkMode: 'media',
  // ...
}

Конфиг
CSS