iOS、Android、Windows都支持系统级暗黑模式了,网站最好也适配一下。用户晚上浏览不刺眼,体验好很多。这篇文章说说怎么实现。
晚上看亮晃晃的白底网站,眼睛很累。暗黑模式降低亮度,减少蓝光,对眼睛更友好。而且暗黑模式现在很流行,是个加分项。
用CSS媒体查询 prefers-color-scheme: dark 检测系统主题。用户开了暗黑模式,自动切换样式。
也可以加个手动切换按钮,让用户自己控制。存在localStorage里,记住用户选择。
不是简单把白底变黑底。纯黑太刺眼,用深灰色更好。文字颜色别太亮,对比度要适中。图片要处理,白底图在暗黑模式下可能很突兀。
可以先做主要页面,再逐步完善。用CSS变量管理颜色,切换时只需要改变量值,很方便。
暗黑模式是趋势,适配好了能提升用户体验,值得投入时间做。