Logo Windi CSS

Темный режим

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

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

CSS
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgba(248, 113, 113, var(--tw-text-opacity));
}
.dark .dark\:text-green-400 {
  --tw-text-opacity: 1;
  color: rgba(52, 211, 153, var(--tw-text-opacity));
}

У нас есть два режима для включения темного режима: режим класса и режим медиа-запроса. По умолчанию включен режим 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
.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.dark .dark\:text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}

Режим медиа-запроса

В режиме мультимедийных запросов он использует встроенный запрос @media (prefers-color-scheme: dark) из браузера, который всегда соответствует системным предпочтениям пользователей.

windi.config.js
export default {
  darkMode: 'media',
  // ...
}
Конфиг
CSS
.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
  .dark\:text-white {
    --tw-text-opacity: 1;
    color: rgba(255, 255, 255, var(--tw-text-opacity));
  }
}