让你的网页支持苹果的 黑暗模式(深色Dark模式)

让你的网页支持苹果的 黑暗模式(深色Dark模式)

韩小韩
2021-05-22 / 0 评论 / 42 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年05月22日,已超过30天没有更新,若内容或图片失效,请留言反馈。

prefers-color-scheme 用于检测用户的系统主题是浅色或深色,此属性有三个值

  • no-preference 表示用户未指定操作系统模式,其作为布尔值时以 false 输出
  • light 表示用户的操作系统是浅色模式
  • dark 表示用户的操作系统是深色模式

它的用法也是很简单,默认都是浅色模式的,所以我们只写深色模式的样式就行

@media (prefers-color-scheme: light) {
    /* 浅色模式样式 */
}

@media (prefers-color-scheme: dark) {
    /* 深色模式样式 */
}
0

评论 (0)

取消