免費AI編程助手
Windi CSS 深色模式
2023-02-16 17:58 更新
Windi CSS 具有開箱即用的深色模式支持。
通過為實用程序添加 dark: 變體前綴，它們將僅在啟用暗模式時適用。在以下示例中，預(yù)覽文本在淺色模式下為紅色，在深色模式下為綠色。
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));
}我們有兩種啟用黑暗模式的模式，即類模式和媒體查詢模式。默認情況下，類模式被啟用。
類模式
類模式讓你更好地控制黑暗模式應(yīng)該何時啟用。
?windi.config.js?
export default {
darkMode: 'class',
// ...
}
它檢測父元素的 class="dark"，通常您可以將它應(yīng)用于 html 元素以使其在全局范圍內(nèi)工作。
<html>
<body>
<!-- Dark mode disabled -->
</body>
</html>
<html class="dark">
<body>
<!-- Dark mode enabled -->
</body>
</html>
您可以使用以下代碼片段使配色方案與用戶的系統(tǒng)偏好相匹配，或者編寫您自己的邏輯來管理它。
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));
}媒體查詢模式
在媒體查詢模式下，它使用來自瀏覽器的內(nèi)置@media (prefers-color-scheme: dark) 查詢，始終與用戶的系統(tǒng)偏好相匹配。
?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));
}
}以上內(nèi)容是否對您有幫助：
更多建議：