关于黑暗模式的技术思考

[Germxu]

黑暗模式 作为增强体验的特性, 本无技术难度, 问题是细枝末节受影响的地方太多, 每个项目的技术在接到这种需求的时候都是头疼的.

往大了说, 界面的每个节点都需要审查, 当界面或者内容的结构形式并不固定, 就要对已有的内容形式和结构全面排查适配, 差不多相当于重建一遍用户界面.

以 淘宝 的实践方案来看, 这是一个典型的代表中国互联网的大而全的应用, 适配工作量巨大, 至今也没有应用到不同版本, 比如我为了本篇而最新下载的 iOS 海外版淘宝依然没有黑暗模式.

再看一下web端适配体验优秀的 github, 只是适配不同模式用的 css 文件就有几千行, 所以在任何端来说, 这个功能都是一个大工程, 因此也是很多用户量巨大但是依然没有计划做黑暗适配计划的产品的主要原因.

其实对于不少内容来说黑暗模式的难点在于真正契合黑暗模式本身的理念: 减少黑暗环境下高亮的屏幕对于眼睛的刺激. 在实践上大多数实践都是翻转文本, 保留图片, 视频, 超链接, 代码块 等本身具有的特殊高亮, 这样在以图片为主的内容上效果并不优秀, 例如购物平台, 在多端同步或者移动端先行之下很多平台内容都是图片形式呈现, 图片的亮度通常都很高, 在不改变图片色相亮度对比度的时候就图像显得尤为突出 , 甚至是很丑也很亮, 简直是违背了黑暗模式本身的出发点, 但是似乎也难以有更好的实践.

---

目前 Web 端最大的适配问题就是对应的实践标准或者 API 迟迟没有出现, 只能按照重做一遍 UI 的路子再走一遍, 费时费力, 在文本反转之后往往会出现文本背景对比度下降的问题, 反而增加了阅读障碍, 而图片视频又会反过来过高的对比度产生刺激. 在内容对比度自适应的道路上还有很长的路要走,等待对应暗色模式API或者自动对比度适应的相关正式标准, 有关开发实践前往参考文献

参考

1. Color and contrast accessibility
   
2. MDN Color contrast
3. W3C Contrast
4. W3C Understanding Success Criterion

[TarsChiu]

目前先缓一缓，等有时间大搞一番😉

[Germxu]

目前先缓一缓，等有时间大搞一番😉

黑暗模式功能已经初步完成, 用了最简单的实践方案, 问题还是很多的, 所以特地写了此文, 希望有更多人认可吧😂

[One010101]

如果是喜欢黑暗模式的用户肯定是所有网站都配置了黑暗模式，所以作者不用太在意这个，我现在的用的谷歌插件叫dark reader，功能非常多，我就不介绍了，结合你的脚本，csdn的页面是非常舒适的。

[Germxu]

如果是喜欢黑暗模式的用户肯定是所有网站都配置了黑暗模式，所以作者不用太在意这个，我现在的用的谷歌插件叫dark reader，功能非常多，我就不介绍了，结合你的脚本，csdn的页面是非常舒适的。

是的, 我只是在尽可能落地一种技术实践吧, 希望有人用的上就是好的, 反正也不是强制, 不会对用户影响太多,
黑暗模式还是基于编程习惯来的吧, 既然都是编程相关就一并做了出来, 还是希望尽可能做得好一些