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

时间：2021-05-08

自19年开始，Android和IOS平台，都开始玩暗黑模式。当然这没什么不好，但是当我们的页面被用户在暗黑模式打开之后，会被那传统大白色瞬间闪瞎双眼。

下面会简单的说一下如何让页面支持暗黑模式。

准备

其实，我们只是需要使用到css中的prefers-color-scheme 媒体查询。

  • no-preference 表示用户未制定操作系统主题。作为布尔值时，为false 输出。
  • light 表示用户的操作系统是浅色主题。
  • dark 表示用户的操作系统是深色主题。

    • 说明

  • 这篇文章发布的时候，微信还无法拿到prefers-color-scheme 参数，所以当我们在微信中打开页面目前不支持暗黑模式。
  • 此方法只是一个简单demo，可以使用该方法拓展出其他实现方式。
  • prefers-color-scheme说明
  • DEMO地址

    • HTML

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>页面适应黑暗模式</title></head><body class="back"><div class="models"><h1>测试文字</h1></div></body></html>

    CSS

    .back {background: white; color: #555;text-align: center}@media (prefers-color-scheme: dark) { .back {background: #333; color: white;} .models {border:solid 1px #00ff00}}@media (prefers-color-scheme: light) { .back {background: white; color: #555;} .models {border:solid 1px #2b85e4}}

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章