哥们姐们儿，今天想跟大家唠唠我最近捣鼓出来的网站深夜模式。说起来这事儿，一开始完全是被逼的。晚上睡得晚，经常半夜三更还在网上瞎逛。可咱们很多网站，白天看着挺亮堂，一到晚上，那白花花的一片背景，简直就是往眼睛里扎针。
你懂那种感觉不？周围漆黑一片，就你屏幕亮得跟个灯泡似的。时间一长，眼睛干涩得不行，总觉得眼珠子疼。我就琢磨着，这不行，得想个法子。我寻思着，既然手机都有夜间模式，那网站为啥不能弄一个？
开始瞎折腾
我这人就是这样，想到了就得干。我啥也不懂，就凭感觉来。我想着不就是把白色背景换成黑色，黑色文字换成白色嘛多简单的事儿？
- 我上去就一顿改颜色。背景全改成纯黑，文字全改成纯白。
- 结果？屏幕是黑了，可那白字亮得跟探照灯似的，更刺眼了！比之前更要命。
- 然后我又尝试着把文字颜色也调暗点，比如改成灰色。但这样一来，又感觉看不清了，模模糊糊的，看着累。
- 有些链接原来的蓝色或者红色，一到纯黑背景上，就显得特别扎眼，跟狗皮膏药似的，一点美感都没有。按钮也是，白的刺眼，黑的又看不见。
那段时间，我自己的网站晚上都用不了，就是因为自己瞎折腾出来的配色，晚上打开看一眼就想关掉。这不折腾还一折腾更烦心了。我就在想，这深夜模式，到底该怎么弄才能舒服？
琢磨别人家的门道
吃一堑长一智嘛后来我就不自己瞎鼓捣了，开始去研究那些做得好的网站。像有些阅读类App、一些大厂的网站，它们晚上都有夜间模式。我就盯着它们看，看人家的配色是怎么弄的。慢慢的我才发现，原来这里面学问还真不少，不是简单的黑白颠倒。
- 背景色： 我发现，那些做得舒服的夜间模式，背景色都不是那种死黑死黑的纯黑。很多都是深灰色，或者带点儿蓝调、绿调的深色，这样会显得更柔和，没那么压抑。
- 文字色： 文字也不是纯白色。大部分都是灰白色，或者浅米色。这样既能保证对比度，又不会让文字光线太强，看久了眼睛也不会累。
- 链接和按钮： 这些元素也很讲究。它们不会选太亮的颜色，通常是比背景色稍亮一点点的柔和色调，或者用暗一点的饱和色，这样既能区分开，又不会跳脱。
- 边框和分割线： 还有很多小细节，比如边框、分割线，它们在夜间模式下也都变得很淡，几乎看不出来，这样画面就会显得很干净，不凌乱。
我算是明白了，好的夜间模式，不是为了黑而黑，而是为了让光线更柔和，颜色更和谐，最终目的是为了让眼睛更舒服。这才是精髓。
我的深夜模式实操步骤
有了这些经验，我决定重新来过。这回我可不敢瞎来了，一步一步慢慢磨。我把整个过程总结了一下，大概就是这样搞的：
- 选定一个主色调： 我放弃了纯黑，选择了一个非常深的、带一点点灰度的藏蓝色作为主背景色。这个颜色晚上看着特别舒服，不刺眼，还有一点点深邃感。
- 搭配文字颜色： 文字我没有用纯白，而是挑了一个偏米白的浅灰色。这样在深蓝色的背景上，文字阅读起来很清晰，但又没有那种“发光”的刺眼感。
-
调整链接和按钮： 这是个细致活儿。
- 普通链接我就选了一个比文字色稍亮一点点的淡蓝色，不抢眼，又能表明是链接。
- 重要的按钮，我用了个偏暗的琥珀色，边框也很细，这样既能突出，又不会太跳脱。鼠标放上去，颜色会稍微变亮一点点，给个反馈。
-
搞定其他元素：
- 标题颜色我用了和文字差不多的浅灰色，但是字体会粗一些，大小会大一些，用来区分层级。
- 那些边框、阴影、分割线，我全部调成了非常淡的深灰色，甚至有时候直接让它们隐藏掉，减少视觉干扰。
- 图片我没怎么动，但一些有亮色背景的图片，我就尝试做了一点点透明度处理，让它融入整体的暗色调。
- 增加切换开关： 这个很重要，不能让用户强制使用。我专门在网站右上角搞了个小月亮图标，一点就能在白天模式和深夜模式之间切换。这样无论白天晚上，大家都能按自己习惯来。
反复测试和微调
上面的步骤看着简单，但实际操作起来，我可是来来回回地试了好多遍。每次调完一个颜色，我就会在各种光线下自己试试。晚上关灯看，开台灯看，甚至白天拉上窗帘看。我就发现了很多问题：
- 有时候颜色在我的屏幕上看着舒服，换个屏幕就变味了。
- 有时候看久了，发现某个地方的对比度太低，有点费力。
- 有时候又发现某个按钮的颜色还是太亮了，忍不住想去遮挡一下。
就这么一点一点地改，不断地调整。比如这个颜色的深浅，那个颜色的饱和度，每一个像素点我恨不得都盯着看。有时候为了一个按钮的颜色，我能捣鼓半个小时。
最终，搞了大概一个星期，我才算把我想要的那个“舒服”的深夜模式弄了出来。现在我晚上再打开自己的网站，那种感觉真是棒极了！眼睛不累了，整个页面看起来也变得高级了很多，不再是白天那种傻白傻白的样子。
虽然这只是个小小的功能，但对我这种夜猫子来说，简直是福音。眼睛舒服了，看东西效率都高不少。所以说，有些东西，表面上看着简单，但里面真是有门道的。自己亲手搞出来，用着也更踏实，更有成就感。
