H5项目适配系统深色模式方案总结

一、背景

随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比,还能 提供更好的可视性和沉浸感。

如何切换深色模式

• iOS：“设置”–“显示与亮度”–“外观”，选择“深色”

• Android：“系统设置”–“显示”–“深色模式”。

二、问题

如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。

所以，需要对深色模式进行一些适配。

我尝试了一些方案：

三、H5项目适配深色模式方案

1.声明 color-scheme

color-scheme

有两种方式。

1.1meta

在head中声明<meta name="color-scheme" content="light dark">，声明当前页面支持 light 和 dark 两种模式&