从Nuxt文档里发现色彩的配搭诀窍
由于近期 Gitbook 非常的不稳定，导致木及简历[1]的帮助中心一直挂，一直在寻找一个比较好用，且简单上手的文档搭建系统，最好还是可以私有部署（使用免费服务多半会不稳定，还是自己付费部署香）。
最后在偶然之间看到了 https://tailwindcss.nuxtjs.org/, 感觉这个文档的的搭配非常的好看，还提供了暗黑模式。
从网页源码就可以看出这个站点是由 Nuxt 来搭建的。
Nuxt.js 是一个基于Vue.js 的轻量级应用框架，可用来创建服务端渲染(SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。
然后顺势摸索到了这个站点的 Github ，然后就发现了原来还有一款叫做 nuxt/content 的文档站点工具。
拉取代码后， nuxt/content 有一个配置叫做 primaryColor 属性，只需要配置一个颜色就可以让你的网站拥有一套色彩。以左侧的菜单栏色彩搭配为例，我们任意写几个颜色 。
primaryColor: '#1e4254'
primaryColor: '#c9f01b'
primaryColor: '#a42288'
primaryColor: '#5042d2'
这就非常有意思，然后我就想，nuxt/content[2] 是如何做到这个效果的呢？
本着我的探索（无聊）精神，我就打开了它的源码，跟着一个个发现，顺着源码，我最终发现了一个叫做 theme-colors 的库，来计算整体的色彩值。例如以下的样子：
而其中运用的算法叫做 tint-shade 算法，就是往一个色彩中，添加一定比例白色和黑色，从而达到混合产生新色彩的过程。
虽然听起来这个算法很牛逼的样子，但是其实他和我们小时候，玩的调色原理是一毛一样的。
图片来源[3]
举个例子，我们有一个蓝色小方块，如果我们想要将它的色彩更淡一些，我们会怎么做呢？
大家肯定能轻易想到，当然是往里面加白色！
例如我们以 1 : 9 进行混合，将它们进行混合，为了区分白色正好是蓝色的9倍，我讲白色画了边框。
混合后，我们得到了新的色彩~
也可以理解为在小蓝块中加入了8分水，将小蓝块进行稀释，我们可以看到小蓝块已经和小白块一样大了，但是它的透明度变成了原来的1/9
然后我们来用动画看一下，这个融合的过程
讲完了原理以及动画演示，我们只需要把这个过程通过代码写出来就可以了。
// components 代表 rgb 值，例如 [ 42, 175, 241 ]
function tint (components, intensity) {
return components.map(c => Math.round(c *( 1 - intensity) + 255 * intensity))
}
// 蓝色比白色为 1:9
tint([ 42, 175, 241 ], 0.9);
计算公式如下
(42 * 0.1 + 255 * 0.9 , 175 * 0.1 + 255 * 0.9 , 241 * 0.1 + 255 * 0.9)
就等于 (234, 247, 254) 转化为 hex 就是 #eaf7fe 。
同理，我们想要得到更深的色彩，只需要让它与黑色按照比例混合，黑色越多，色彩也就越深。
通过不断对原色彩添加不同比例白色和黑色，就形成了这样一条色带，这个算法也是 Ant-Design 第一代的色彩系统。
{
'50': '#F4FBFE',
'100': '#EAF7FE',
'200': '#CAEBFC',
'300': '#AADFF9',
'400': '#6AC7F5',
'500': '#2AAFF1',
'600': '#269ED9',
'700': '#196991',
'800': '#134F6C',
'900': '#0D3548'
}
由于网站整体都是由 tailwind css 写的，然后可以利用它的定制主题，在 css 中加入变量。
:root {
--primary-50: #F4FBFE,
--primary-100: #EAF7FE,
...
--primary-900: #0D3548,
}
// tailwind.config.js
colors: {
primary: {
50: 'var(--primary-50)',
100: 'var(--primary-100)',
200: 'var(--primary-200)',
300: 'var(--primary-300)',
400: 'var(--primary-400)',
500: 'var(--primary-500)',
600: 'var(--primary-600)',
700: 'var(--primary-700)',
800: 'var(--primary-800)',
900: 'var(--primary-900)'
}
},
然后就可以在 class 中写入以下的代码
text-primary-500 bg-primary-100
就能得到:
不仅如此还可以定义hover/暗黑模式下的色彩搭配。
hover:text-primary-500 dark:bg-primary-900
所以，你看，是不是一切都很简单，只是把我们小时候玩的东西，变成了代码的形式。正如《千与千寻》所说，"曾经发生过的事情不可能忘记，只不过是想不起而已。" 那么，看了我的文章之后，你们想起来了吗？如果想起来了，可以留个言，也可以点个赞。
参考资料
[1]木及简历: https://www.mujicv.com
[2]nuxt/content: https://content.nuxtjs.org/themes/docs
[3]图片来源: https://zhuanlan.zhihu.com/p/164704064