前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >让你的网页支持苹果的 黑暗模式(深色Dark模式)

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

作者头像
骤雨重山
发布2022-01-17 10:22:09
8550
发布2022-01-17 10:22:09
举报
文章被收录于专栏:骤雨重山

关于MAC的黑暗模式(深色Dark模式)网站颜色不适应问题,给予解决方案。

在未修复前,深色模式看的话就是一片空白,因为深色模式的字体是白色,同时给了一个 background-color:#f5f5f5 样式所导致

这个是不能忍的,苹果用户还是蛮多的,并且 Safari、Chrome 目前都支持深色模式,所以来适配一下

这里需要用到一个媒体查询 @media 的语法

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

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

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

代码语言:javascript
复制
@media (prefers-color-scheme: light) {
    /* 浅色模式样式 */
}

@media (prefers-color-scheme: dark) {
    /* 深色模式样式 */
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-05-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • prefers-color-scheme 用于检测用户的系统主题是浅色或深色,此属性有三个值
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档