准备

实际上，我们只需要在css中使用项-配色方案-媒体查询。

无偏好表示用户没有制定操作系统的主题。当它是布尔值时，它输出false。

灯光表示用户的操作系统是灯光主题。

暗表示用户的操作系统是暗主题。

(推荐教程：html教程)

解释

这篇文章发表时，微信无法获得项-配色方案参数，所以我们在微信中打开页面时，目前不支持暗模式。

这个方法只是一个简单的演示，可以用来扩展其他实现。

项-配色方案描述

演示地址

超文本标记语言

！DOCTYPEhtml

超文本标记语言

头

metharset=' UTF-8 '

元名称='视口'内容='宽度=设备宽度，初始比例=1.0，最小比例=1.0，更大比例=1.0，用户可缩放=否'

标题页适应黑暗模式/标题

/head

身体

Divh1测试文本/h1/div

/body

/html

半铸钢钢性铸铁(Cast Semi-Steel)。back { background:whitecolor: # 555文本-对齐：居中}

@ media(preferences-color-scheme : dark){。back { background: # 333颜色：白色；}。型号{border:solid1px#00ff00}

}

@media(-color-scheme:light){。back { background:whitecolor: # 555}。型号{border:solid1px#2b85e4}

}

本文转载自励志网