Skip to content

判断系统颜色模式

CSS 判断颜色模式

使用媒介查询 perfers-color-scheme ,支持 dark,light,no-preference 三种模式。 以下是使用 Vite vue-ts 模板创建项目自动生成的代码

css
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
  }
}

查看 JS 判断系统颜色模式