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

手动监听 

const updateDark = (dark: boolean) => {
  const localDark = localStorage.getItem('localDark');
  const html = document.documentElement;

  // 通知TailwindCSS深色模式切换
  if(localDark == "true"){
    html.classList.add('dark');
    return;
  }else if(localDark == "false"){
    html.classList.remove('dark');
    return;
  }
  if(dark){
    html.classList.add('dark');
  }else{
    html.classList.remove('dark');
  }
}

const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const darkListener = (e: MediaQueryListEvent) => updateDark(e.matches)

// 根据使用的框架，这里是Vue
// 如果是React，应该使用useEffect(()=>{}, [])
onMounted(()=>{
  updateDark(darkModeMediaQuery.matches);
  darkModeMediaQuery.addEventListener('change', darkListener);
})

// 如果是React，使用useEffect中的 return ()=>{}
onUnmounted(()=>{
  darkModeMediaQuery.removeEventListener('change', darkListener);
})
Flex布局居中