如何处理笔记 App 的深色模式

955 阅读3分钟

大部分网页/App 处理深色模式逻辑并不复杂,把白底黑字变成黑底白字即可。最近一周,我在 Dark Reader 帮助下,几乎没有进行太多的配置就让 Multibility 在深色模式下获得了不错的效果。

笔记 App 对于深色模式却有一个尴尬的两难:一方面,笔记就是手写的文字,文字在深色模式下当然就应该是黑底白字的;另一方面,笔记也可以是手画的图片,图片在深色模式下当然应该保持不变,而不是变成负片。

市面上的 iPad 笔记 App 大多选择让画布不受深色模式影响。当然这并不意味着它们只能选择白底黑字,而是他们的笔记画布背景(或称为模板)和系统或 App 的深色模式是无关的。也就是说,用户如果选择了黑色的笔记画布背景和白色的画笔,自然是黑底白字的;如果用户没有这么选择,那不管深色模式打开与否,都始终是白底黑字。

作为一名夜猫子,我的 Notability 笔记几乎都是黑色背景模板的。

IMG_0306.PNG

俗话说的好,Once you go black, you never go back。这么设计的最大缺陷是,黑色背景下势必会用白色或浅色的笔触去书写,如果我事后还想再把背景切换为白色,那书写的笔记就看不见了。

当然,也有例外。Apple 自己做的 “笔记(Notes)”是会跟随着系统的深色模式自动切换的,最惊艳的是画笔和笔触的颜色也会自动变化,白色会变为黑色,深红色会变为浅红色。因为 Apple Notes 下画笔是可以在调色板内挑选 RGB 空间内任意颜色的,因此切换深色模式前后可以看到画笔颜色的值发生了真实的变化(而不是改变某种颜色的最终显示效果)。

IMG_0305.jpeg

IMG_0304.jpeg

我一开始尝试应用这种设计,但是真的动手做了之后发现程序会多出来大量的把颜色转来转去的逻辑,非常容易出错(其实 Apple Notes 在深色模式切换前后也有一些 bug)。此外,这还涉及荧光笔的混合模式是正片叠底还是滤色的问题。因为,我这还是在线协同的笔记平台,更不能把错误转化后的颜色在黑白用户之间传递,也就放弃了这种做法。

如果不想要把颜色转来转去,那可以以将 Model 层中存储的画笔和笔画颜色与 View 层中显示的当前画笔颜色和画布上的笔画颜色完全解耦,比方说,Model 中存储了颜色 black, 它在浅色模式的 View 下显示为 #000000,在深色模式下显示为 #ffffff。很可惜,我的画布组件虽然是在 UI=F(State) 的总方针指导下开发的,但在处理对选中笔画的修改时,仍然有将 View 层的数据传回 Model 覆盖原数据的操作(目前也没有改掉这种做法的打算)。这种方案仍然需要转换颜色,在 Model 和 View 之间把颜色弄脏/洗干净。

最后讨巧的做法,用 Dark Reader 针对图标 invert 功能,给 canvas 和画笔颜色选择器设置样式:

filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;

这么做的好处是在几乎没有改动画布组件的情况下实现了几乎和 Apple Notes 一样的效果。

IMG_0307.PNG