设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 74|回复: 12

Html页面支持暗黑模式的实现

[复制链接]

1

主题

55

回帖

133

积分

注册会员

积分
133
发表于 2024-4-20 10:29:56 | 显示全部楼层 |阅读模式
自19年开始,Android和IOS平台,都开始玩暗黑模式。当然这没什么不好,但是当我们的页面被用户在暗黑模式打开之后,会被那传统大白色瞬间闪瞎双眼。
下面会简单的说一下如何让页面支持暗黑模式。
准备

其实,我们只是需要使用到css中的 prefers-color-scheme 媒体查询。
       
  • no-preference 表示用户未制定操作系统主题。作为布尔值时,为 false 输出。   
  • light 表示用户的操作系统是浅色主题。   
  • dark 表示用户的操作系统是深色主题。
说明

       
  • 这篇文章发布的时候,微信还无法拿到 prefers-color-scheme 参数,所以当我们在微信中打开页面目前不支持暗黑模式。   
  • 此方法只是一个简单demo,可以使用该方法拓展出其他实现方式。   
  • prefers-color-scheme说明   
  • DEMO地址
HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6.     <title>页面适应黑暗模式</title>
  7. </head>
  8. <body class="back">
  9. <div class="models"><h1>测试文字</h1></div>
  10. </body>
  11. </html>
复制代码
CSS
  1. .back {background: white; color:  #555;text-align: center}

  2. @media (prefers-color-scheme: dark) {
  3.   .back {background:  #333; color: white;}
  4.   .models {border:solid 1px #00ff00}
  5. }

  6. @media (prefers-color-scheme: light) {
  7.   .back {background: white; color:  #555;}
  8.   .models {border:solid 1px #2b85e4}
  9. }
复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

1

主题

78

回帖

168

积分

注册会员

积分
168
发表于 2024-4-28 00:41:43 | 显示全部楼层
每日一回

0

主题

60

回帖

118

积分

注册会员

积分
118
发表于 2024-4-28 02:10:07 | 显示全部楼层
6666666666

1

主题

62

回帖

148

积分

注册会员

积分
148
发表于 2024-5-4 04:01:38 | 显示全部楼层
同意你的观点,我们有共鸣。

0

主题

57

回帖

115

积分

注册会员

积分
115
发表于 2024-5-13 04:58:31 | 显示全部楼层
我们一起努力,共同解决问题吧。

0

主题

47

回帖

95

积分

注册会员

积分
95
发表于 2024-7-6 16:09:16 | 显示全部楼层
谢谢你分享这个信息

0

主题

32

回帖

71

积分

注册会员

积分
71

热心会员付费会员

发表于 2024-7-21 12:28:47 | 显示全部楼层
谢谢你分享这个信息

1

主题

37

回帖

97

积分

注册会员

积分
97
发表于 2024-8-12 22:56:41 | 显示全部楼层
同意你的观点,我们有共鸣。

1

主题

55

回帖

133

积分

注册会员

积分
133
发表于 2024-9-4 04:48:20 | 显示全部楼层
我完全同意你的观点
发表于 2024-9-6 23:37:33 | 显示全部楼层
每日一回
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-24 10:01 , Processed in 0.111523 second(s), 27 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表