css 适配暗黑模式

小小孩
2020-12-04 / 0 评论 / 1,063 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2022年12月04日,已超过481天没有更新,若内容或图片失效,请留言反馈。
自从苹果支持暗黑模式后,各个 APP 网站都支持暗黑模式,之前很多都是 js 手动切换模式,其实纯 css 媒体特性也能完全适配

prefers-color-scheme

prefers-color-scheme 是 CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。

语法

  • no-preference 表示系统未知用户在这方面的选项。
  • light 表示系统选择使用浅色主题的界面。
  • dark 表示系统选择使用暗色主题的界面。

例子

<div class="day">Day</div>

<div class="night">Night</div>
@media (prefers-color-scheme: dark) {
  .day {
    background: #333;
    color: white;
  }
  .night {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day {
    background: white;
    color: #555;
  }
  .night {
    background: #eee;
    color: black;
  }
}

实际使用

正常模式的下 我们正常写 css 代码 , 如果需要根据系统显示暗黑模式
即可添加如下代码

... // 正常css 代码
@media (prefers-color-scheme: dark) {
  ... //暗黑模式css代码;
}

兼容性

好用是好用 ,如果考虑兼容性 就需要注意了(我是不考虑兼容性)

prefers-color-scheme 兼容性

0

评论 (0)

取消