免费AI编程助手
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));
}
}以上内容是否对您有帮助：
更多建议：