自19年开始,Android和IOS平台,都开始玩暗黑模式。当然这没什么不好,但是当我们的页面被用户在暗黑模式打开之后,会被那传统大白色瞬间闪瞎双眼。
下面会简单的说一下如何让页面支持暗黑模式。
准备
其实,我们只是需要使用到css中的 prefers-color-scheme 媒体查询。
no-preference 表示用户未制定操作系统主题。作为布尔值时,为 false 输出。
light 表示用户的操作系统是浅色主题。
dark 表示用户的操作系统是深色主题。
说明
这篇文章发布的时候,微信还无法拿到 prefers-color-scheme 参数,