个人博客网站怎么适配手机端夜间模式或深色模式,个人博客网站适配手机端夜间模式/深色模式指南

马肤

温馨提示:这篇文章已超过937天没有更新,请注意相关的内容是否还可用!

大家对网站的自适应模式都已经清楚了,现在个人博客基本都兼容自适应代码,相比手机端的优势很明显,在PC端、手机端和IPAD端都采用同一套代码,不必再另外解析独立域名,有效避免了网页内容的重复,并能集中精力维护网页,对搜索引擎友好。但是近几年各大手机厂商逐渐开始注重深色方式或者说夜间模式,从而改善用户在环境光亮低时的阅读体验。很多手机APP应用都已经对夜间模式进行了支持,那么问题来了,对于手机网站来说,个人博客的网站能否支持自适应浅色模式和夜间模式呢?答案是当然可以啦!

个人博客网站怎么适配手机端夜间模式或深色模式,个人博客网站适配手机端夜间模式/深色模式指南 第1张

早在2020年7月W3C推出的 prefers-color-scheme 的 media 选择器,使得网页能够适配深色模式和浅色模式。

什么是prefers-color-scheme?

W3C 在 2020 年 7 月 31 日发布的 Media Queries Level 5 标准草案 中提到了新的属性 prefers-color-scheme,网页现在可以通过条件规则组来获取浏览器宿系统的暗色模式状态并应用了。也就是说,现在我们可以很简单地实现“暗色模式系统访问的页面是暗色的,亮色模式系统访问的页面是亮色的”。

就技术而言我们先就可以很简单地实现手机端浅色和夜间模式的适配,prefers-color-scheme 有 2 种值: 

light——浏览器宿系统使用亮色主题的界面,同时也是默认值,浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值。

dark——浏览器宿系统使用暗色主题的界面。

还有一个已废弃的值: no-preference——浏览器宿系统使用未知主题的界面,当较旧版本的浏览器在宿系统不支持系统层级的暗色模式时会返回这个值,较旧版本的浏览器 privacy.resistFingerprinting 被设置为 true 时返回的也将是这个值,通过条件规则组就可以作出判断。

CSS代码

个人博客网站怎么适配手机端夜间模式或深色模式,个人博客网站适配手机端夜间模式/深色模式指南 第2张 CSS
@media (prefers-color-scheme: dark) {
    // 暗色模式样式}@media not (prefers-color-scheme: dark) {
    // 非暗色模式样式}

JavaScript

只使用 CSS 条件规则很难实现某些需求,我们可以对 window 使用 matchMedia 方法得到的 Media 使用 matches 方法来获取系统暗色模式状态:

个人博客网站怎么适配手机端夜间模式或深色模式,个人博客网站适配手机端夜间模式/深色模式指南 第2张 JavaScript
if (window.matchMedia('prefers-color-scheme: dark').matches) {
    // 是暗色模式做什么} else {
    // 非暗色模式做什么}

另外还可以监听系统暗色模式的状态,在系统开关暗色模式时作出反应:

个人博客网站怎么适配手机端夜间模式或深色模式,个人博客网站适配手机端夜间模式/深色模式指南 第2张 JavaScript
window.matchMedia('(prefers-color-scheme: dark)').addListener(e => {
    if (e.matches) {
        // 系统开启暗色模式后做什么
    } else {
        // 系统关闭暗色模式后做什么
    }});

其实 prefers-color-scheme 也不是什么新东西了,去年水果就已经在 macOS Mojave 上的 Safari 中添加了它,随后各浏览器不断跟进,现在的兼容性还算不错。

至此通过上面的代码兼容,我们就可以实现手机端深色和夜间模式的自适应兼容,之前在群里看到有人讨论过,然后自己也一致未在意,今天在公众号看新闻时看到了月光博客写的这篇文章教程,自己也百度查看了相关的资料,至于主题是否会增加,带商议后决定了,不要着急,给科技一点时间,哈哈,这句话耳熟么?魅族发布会说的,给科技以时间!好了,教程记录完成,有问题留言反馈自己。



0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 如何购买远程服务器账号(如何购买远程服务器账号密码),如何购买远程服务器账号及密码指南,如何购买远程服务器账号及密码指南,一步步教你选购服务器账号与密码设置,如何购买远程服务器账号及密码设置指南,选购服务器账号与密码设置的步骤教程,如何购买远程服务器账号及密码设置指南,选购与设置教程,如何购买远程服务器账号及密码设置指南——选购与设置教程全解析,如何购买远程服务器账号及密码设置指南,选购与设置教程全面解析,如何购买远程服务器账号及密码设置指南,选购与设置教程全面解析
  • 成都政府购买服务器(成都政府购买服务器有哪些),成都政府服务器采购全解析,购买历程、细节与影响,成都政府服务器采购全解析,购买历程、细节与影响,探究服务器采购之路
  • 购买金蝶服务器分录(企业购买金蝶软件服务费会计分录),企业购买金蝶软件服务费会计分录详解,金蝶服务器分录指南,金蝶服务器与软件服务费会计分录详解,企业购买金蝶软件分录指南
  • 购买服务器需要什么(购买服务器需要什么资质),购买服务器指南,资质与需求全解析,购买服务器资质与需求全解析,资质要求和购买指南,购买服务器资质与需求解析,购买指南与资质要求全攻略,购买服务器资质与需求解析,购买指南与资质要求全攻略,购买服务器资质与需求解析,购买指南与资质要求全攻略,购买服务器资质与需求解析,购买指南与资质要求全攻略,购买服务器资质与需求解析,全方位指南与资质要求攻略,购买服务器资质与需求解析,全方位指南与资质要求攻略
  • 游戏服务器是购买(游戏服务器是购买还是安装),游戏服务器,购买还是安装?选择指南,游戏服务器购买还是安装?选择指南,购买篇还是安装篇?,游戏服务器购买还是安装?选择指南与购买篇解析,游戏服务器购买还是安装?全面解析与选择指南,购买篇 VS 安装篇的考量与决策建议。,游戏服务器购买还是安装?全面解析与选择指南,购买篇与安装篇的考量与决策建议。,游戏服务器购买还是安装?全面解析与选择指南,购买篇与安装篇的考量与决策建议。,游戏服务器购买还是安装?全面解析与选择指南,购买篇与安装篇的考量与决策建议。
  • 政府可以购买哪些项目的服务器(政府可以购买哪些项目的服务器设备),政府服务器采购项目概览,哪些项目设备在采购之列?,政府服务器采购项目概览,哪些项目设备在采购之列?政府可购买服务器设备项目解析,政府服务器采购项目概览,哪些项目设备在采购之列?解析政府可购买的服务器设备项目,政府服务器采购项目概览,解析可购买服务器设备项目及其采购之列,政府服务器采购项目概览,解析可购买服务器设备及其采购之列的项目分析,政府服务器采购项目概览,解析可购买服务器设备及其采购之列的项目分析
  • 关于购买微软服务器操作系统(关于购买微软服务器操作系统的通知),微软服务器操作系统购买指南,最新通知与指南,微软服务器操作系统购买指南,最新通知与购买指南概览,微软服务器操作系统购买指南,最新通知与购买指南概览,微软服务器操作系统购买指南,最新通知与购买指南概览,微软服务器操作系统购买指南,最新通知与购买指南概览
  • 购买域名服务器怎么做账(购买域名服务器怎么做账务),购买域名服务器的账务处理方式与操作指南,购买域名服务器的账务处理方式与操作指南,如何做账与账务处理?,购买域名服务器的账务处理方式与操作指南,从购买到做账全流程解析,购买域名服务器全流程解析,账务处理方式与操作指南,从选购到做账的详细指南,购买域名服务器全流程详解,账务处理与操作指南,购买域名服务器全流程详解,账务处理方式与操作指南,从选购到做账的指南大全,购买域名服务器全流程详解,账务处理方式与操作指南——从选购到做账的指南大全
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,393人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码