晚上躺床上刷手机看文章,白花花的屏幕晃眼睛。越来越多网站加了深色模式,一键切换成黑底白字,看着舒服。这个功能其实不复杂,免费CMS加个插件就能做。
深色模式为什么重要
第一,体验好。晚上或者关灯的时候,深色背景不刺眼。
第二,对OLED屏幕手机来说,纯黑背景还省电。
第三,现在iOS和安卓系统都有全局深色模式,你的网站如果自动适配,会跟着系统切换,不用客户手动按。
怎么实现
方法有几种:
最简单的,用插件。免费CMS市场有现成的深色模式插件,装一下,选一个切换按钮样式,完事。它会自动给你网站加一个小月亮图标,客户点一下切换。
自动跟随系统。在CSS里用 prefers-color-scheme 媒体查询,根据客户系统设置自动亮暗。这种体验最好,但需要主题本身支持。
几个注意点
别把所有颜色都简单反色。图片在深色模式下要看看还合不合适。代码块、引用块、按钮在深色模式下要单独调,不然会很突兀。
切换按钮放右上角或者侧边栏,别放弹窗里。
要不要做
如果你是做内容站、博客、教程类网站,加上深色模式是加分项。如果你是企业官网、电商站,意义不大,客户本来就不会在你这看很久。


