Development Docs | 开发文档
CSS
深色模式

深色模式

自动深色模式判定 

/* 默认样式（通常是浅色） */
body {
  background-color: white;
  color: black;
}

/* 当系统开启深色模式时，自动覆盖上面的样式 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: white;
  }
}

TailwindCSS

注意，下面的用法适用于TailwindCSS@v4

自动深色模式

如果希望根据系统的深色模式自动切换，在全局css中:

@custom-variant dark (@media (prefers-color-scheme: dark));

这时候使用下面的class类，会切换到dark:的样式

比如这个样式表示在深色模式下，外层div的背景色为黑色，p文本为白色

<div class="dark:bg-black">
  <p class="dark:text-white">Hello</p>
</div>

手动切换

如果需要手动切换深色模式，可以用根标签来区分深色模式，在全局css中:

@custom-variant dark (&:where(.dark, .dark *));

表示为，如果一个标签有.dark类，或者这个类的所有后代标签都应用深色模式
这里的.dark类可以自定义

Warning

注意，如果使用TailwindCSS来控制深色模式，响应式布局@media (prefers-color-scheme: dark)依然会跟随系统的深色模式
如果需要根据TailwindCSS来应用样式，可以这样.dark .xxx{}

手动监听

TODO

Flex布局居中