说起夜间模式，延伸到界面颜色、style guide 等，我常接触的实现方式跟变量、跟命名有关。
比如在客户端里，定义 yellow、green、gray 等分别对应什么色值：
+ (UIColor *)yellow {
if (IS_LIGHT_THEME) {
return [UIColor colorWithHexString:@"FFEB3B"];
} else {
return [UIColor colorWithHexString:@"2F2F2F"];
}
}
在网页里，Sass、Less 以及 CSS 现在也可以使用变量。比如先在 variables 文件里定义好 $red: #EA6F5A，就可以在其它地方使用：
.text {
color: $red;
}
夜间模式也一样，给 </body> 加一个 class，将指定元素的 color、background-color 等属性改为 $nightRed、$nightBackgroundColor 等。
但我发现，有时候我们做得不够好。
颜色总归不止一两种，从文字、按钮、背景色到分割线，红色可能有深有浅，灰色可能有四五种色值，这时怎么命名？
red1、red2，gray 1、gray 2、gray 3。这样的命名描述性很差，有注释还好，没注释的时候还要找设计师问。
grayDC，gray50，分别代表 #DCDCDC、#505050。虽然一眼就知道具体色值，同时也失去了变量的优势。
<small>（如果原本很多处标题都用了 gray50，现在要改深一点，总不可能把 gray50 对应的色值改为 #323232 吧，那就只能逐个逐个元素去改…）。</small>red、redDark，gray100、gray 200、…、gray900。这样虽然体现了深浅，依然无法表达清楚这个颜色的用途。
应该尽量避免用上面这些命名方式，按用途来命名更合理。例如：
- 文字，用 grayTitle、graySubtitle、blueLink 等等；
- 按钮，用 redButtonBorder、redButtonBg、redButtonBgHover 等等。
[Yelp 的 style guide](https://www.yelp.com/styleguide)
[微软 Office 的 style guide](http://dev.office.com/fabric#/styles/colors)
这样做好在，
- 易于管理，可以跟设计上的 style guide 对接，避免颜色过多而混杂；
- 描述性更强，工程师一眼就知道该用在哪，标题用 grayTitle、副标题用 grayTitle，而不用纠结是用 gray800 还是 gray900 然后去问设计师。
- 需要调整时很方便，只要改一处变量，全局生效。
有兴趣不妨浏览 DesignGuidelines.co，这里有更多优秀的 style guide 案例持续在更新。
这套规则同样适用于字号、行距、段距等。
上一篇：《夜间模式随想》
