用正確的方式製作深色模式（或任何網站風格）

前言

根據先前提到「添加深色模式要考慮的代價🔗」，添加深色模式無可避免的會造成額外的設計、開發與維護成本，但如果能在一開始用正確的方式製作網頁風格，那麼是可以有效迴避許多問題的。

實踐深色模式（顏色風格）的方式

深色模式換個角度來看其實就是一種深色調為主軸的顏色風格，製作深色模式實際上是在替網頁製作不同的顏色風格，那麼一套自由擴展方便維護的顏色系統該怎麼做？

方法一、讓風格具備不同顏色

可以先將顏色數值定義為一種變數，並且在不同地方被引用，例如：#534af7。而深色模式可以視作是一種主題，在特定主題情況下顏色也需要會有所變化，舉例來說顏色 A 在深色模式下可能會變成顏色 B，可以進一步透過命名來聯繫顏色之間的關係。

先定義好顏色：

• primary: #534af7
• primary-dark: #b887f7。

再定義好邏輯：

:root {
  --primary: #534af7;
  --primary-dark: #b887f7;
}

/* 文字使用 primary 色 */
body {
  color: var(--primary);
}

/* 當 body 在暗色風格下文字使用 primary-dark 色 */
body.dark {
  color: var(--primary-dark);
}

或者你是設計師工作內容可能會需要畫兩套相同內容的設計稿但指派不同顏色：

顯然這種做法太鳥了，這麼做意味著每新增一種風格工作量會至少暴增一倍。除非是一些特殊的情境需要特別指定顏色，否則最好不要用這種方式來管理顏色。如果你正在使用 Tailwind 的 Darkmode 功能🔗 也應當留意這樣的問題可能發生。

方法二、讓顏色具備不同風格

由前者案例可以看出雖然自由度高但顏色之間的關聯性是定義在引用條件上的，這些邏輯零散的散落在不同頁面角落將會很難管理與統一。

但如果我們在這之上指定相同顏色具備不同風格特性，那麼就可以讓顏色之間的關聯性更加緊密、更易於顏色管理與擴展風格。

/* Primary 色的邏輯可以在不同情境下有不同的解釋 */
:root {
  --primary: #534af7;
}

:root .dark {
  --primary: #b887f7;
}

/* body 文字使用 primary 色 */
body {
  color: var(--primary);
}

如今現代的 UI 設計軟體都具備替相同顏色定義不同風格的功能，舉例來說 Figma 可以透過 Design Token🔗 功能來實現不同情境下的變數定義，讓設計者可以在彈指之間切換不同的風格，包含但不局限於顏色。

像是以上影片就是來自 Update 1: Tokens, variables, and styles🔗 Figma 官方文件描述，可以替相同顏色打造不同風格定義，並輕鬆切換。

總結

大多時候製作顏色風格都應該替顏色定義不同樣式作為出發點，很少會需要將定義顏色的邏輯寫在個別 UI 當中，統一管理通常是「最正確」的做法。