從 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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/MGiXbnodu4Dc0iT5Mc5euw