Windi CSS 深色模式

2023-02-16 17:58 更新

Windi CSS 具有开箱即用的深色模式支持。

通过为实用程序添加 dark: 变体前缀，它们将仅在启用暗模式时适用。在以下示例中，预览文本在浅色模式下为红色，在深色模式下为绿色。

text-red-400 dark:text-green-400

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));
}

我们有两种启用黑暗模式的模式，即类模式和媒体查询模式。默认情况下，类模式被启用。

类模式

类模式让你更好地控制黑暗模式应该何时启用。

windi.config.js

export default {
  darkMode: 'class',
  // ...
}

它检测父元素的 class="dark"，通常您可以将它应用于 html 元素以使其在全局范围内工作。

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

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

您可以使用以下代码片段使配色方案与用户的系统偏好相匹配，或者编写您自己的逻辑来管理它。

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

text-white dark:text-white

Config

{
  darkMode: 'class',
}

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',
  // ...
}

text-white dark:text-white

Config

{
  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));
  }
}

以上内容是否对您有帮助：