网站首页 >> 资讯 >> 正文
标题

网站暗黑模式适配:跟随系统主题切换

15℃  
内容

网站暗黑模式适配:跟随系统主题切换

iOS、Android、Windows都支持系统级暗黑模式了,网站最好也适配一下。用户晚上浏览不刺眼,体验好很多。这篇文章说说怎么实现。

为什么要做暗黑模式

晚上看亮晃晃的白底网站,眼睛很累。暗黑模式降低亮度,减少蓝光,对眼睛更友好。而且暗黑模式现在很流行,是个加分项。

实现方式

用CSS媒体查询 prefers-color-scheme: dark 检测系统主题。用户开了暗黑模式,自动切换样式。

也可以加个手动切换按钮,让用户自己控制。存在localStorage里,记住用户选择。

设计要点

不是简单把白底变黑底。纯黑太刺眼,用深灰色更好。文字颜色别太亮,对比度要适中。图片要处理,白底图在暗黑模式下可能很突兀。

渐进式实现

可以先做主要页面,再逐步完善。用CSS变量管理颜色,切换时只需要改变量值,很方便。

暗黑模式是趋势,适配好了能提升用户体验,值得投入时间做。