精讀《使用 css 變量生成顏色主題》

時間 2019-11-05

標籤精讀使用 css 變量生成顏色主題欄目 CSS 简体版

原文原文鏈接

做者：五靈javascript

本週工做中遇到相似顏色主題的問題，在查資料的時候，看到這個視頻，以爲講得很清楚，並且趣味性豐富，因此想拿出來說講這個頗有意思的主題。css

視頻連接： CSSconf EU 2018 | Dag-Inge Aas & Ida Aalen: Generating Colors with JS and CSS Custom Properties前端

1. 精讀

CSS 變量

CSS 變量及 CSS Variables(Custom Properties)，目前幾乎都已經被主流瀏覽器所支持，可是估計還有一部分讀者不熟悉這個功能，簡單列舉一下使用方法：java

:root {
  --bg-color: brown; // 定義顏色變量
}
.btn {
  // 直接使用顏色預約義的顏色變量
  background-color: var(--bg-color);
}
複製代碼

Web 內容無障礙指南的對比度

Web 內容無障礙指南的對比度指的是 W3C 組織發佈的《Web Content Accessibility Guidelines (WCAG)》，這個指南中涵蓋了讓 Web 內容更易於訪問的各類建議，其中針對網頁的顏色對比度發佈了規範。git

在 Chrome 中對於顏色編輯的時候，打開顏色選擇器也會看到當前顏色的對比度值（Contrast ratio）。github

網頁顏色的對比度值在 1：1 到 21：1 之間，文本和圖像文本的的對比度最小值爲 4.5:1，也就是說低於這個值得對比度都不符合標準。咱們看一下列舉的幾種顏色對比度，對比度越高，也越有利於閱讀。對比度越低，對於一些存在視力障礙或色覺缺陷的用戶，可能就沒法閱讀。瀏覽器

演講中的顏色解決方案

演講在最開始首先講了挪威的一個法律，不符合 Web 內容無障礙指南的站點在挪威是非法的，因此挪威的 Web 開發者很是注重站點的內容無障礙。微信

首先講了使用 css 變量的方式，支持各類顏色主題的切換。利用 js 去設置顏色變量，支持主題的顏色切換。ide

可是緊接着就提出了問題，若是用戶能夠隨意切換顏色主題背景色，那一些按鈕的文字可讀性如何去保障呢？若是用戶選擇了與按鈕顏色想接近的背景色，咱們又該怎麼處理了，緊接着這個演講給出了根據明度決定按鈕文字顏色是黑色仍是白色的方案。wordpress

根據明度決定是黑色仍是白色

具體代碼以下，大體原理是把彩色轉爲灰度的顏色，有一個著名的心理學公式：Gray = R*0.299 + G*0.587 + B*0.114,而後在根據顏色灰度決定使用黑色的主題仍是白色的主題。

if (red*0.299 + green*0.587 + blue*0.114) > 186 use #000000 else use #ffffff
複製代碼

可讀性的問題解決了，可是緊接着又遇到了一個問題，若是用戶選取的顏色很淺呢，與背景顏色的對比度小於 4.5，該怎麼處理呢。

尋找對比度更強的顏色，加強可讀性

演講中給出的解決方法是不斷的加深當前用戶選擇的顏色，循環獲取到對比度最高的同色系顏色。代碼以下：

獲取了一個更深的顏色後，經過給按鈕加一個外邊框的方式，優化總體的可讀性。

文章最後還介紹了，經過給定一個主題色，獲取第二第三主題色的方式，經過將顏色放到 HSL 的顏色輪上，轉動 hue 的值 60 度，獲得一個新的第二主題色。不過演講者也沒有說清楚爲何要這麼作，只是說了這麼作是出於經驗，以爲這樣可以獲得一個恰當的主題色盤。

衍生的純 css 解決方案

演講中提供顏色變動的解決方案基本都是基於 JS 計算的，後來有人在 css-tricks 拋出一篇文章說，這個功能基於 css 就能夠徹底實現，其實關於顏色的原理都是一致的，只是以爲這個實現更加 magic，可是功能都可以徹底知足。好比這篇文章中，關於根據明度決定按鈕文字是黑色仍是白色的代碼以下：

:root {
  --light: 80;
  /* 文字顏色變化的臨界值 */
  --threshold: 60;
}
.btn {
  /* 會被解析成黑色或者白色 */
  --switch: calc((var(--light) - var(--threshold)) * -100%);
  color: hsl(0, 0%, var(--switch));
}
複製代碼

可視化圖表對於顏色的應用

在可視化圖表當中，對於顏色的應用要比 Web 要謹慎的多。咱們在作 Web 開發的時候，也不妨來看一下可視化圖表當中對於顏色應用的一些規範。在可視化圖表中，選擇的顏色不能夠過於隨意，每次顏色的變動都是圖表信息的改變，都爲圖表增長了新的數據，圖表的每一種顏色也是要表達的信息。列舉一些圖表中的顏色使用規範，好比：