使用 CSS Variables 切換前端主題(Theme)

前端專案時常需要進行主題(Theme)切換，比方說現在最常見的 light/dark mode 主題切換。

本文將介紹如何透過 CSS Variables (或 CSS Custom Properties) 及 HTML root element 上的屬性控制前端網頁的主題切換。

CSS Variables (或 CSS Custom Properties)是 CSS3 的新功能，讓您可以不用透過SASS、SCSS等預處理語言即可在原生 CSS 語法中使用變數，讓 CSS 語法也可以達到 Clean Code。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
:root {
    --primary-color: blue;
}

p {
    color: var(--primary-color);
}

h1 {
    color: var(--primary-color);
}

▲範例：透過 CSS Variable 指定主題色彩的顏色

上面是一個簡單的範例，透過一個 –primary-color 的變數指定主題色彩，並套用到網頁中不同元的的樣式之中，未來要修改主題色時，只需要更新該變數，就可以一次性切換頁面中元件(如範例中的與標籤)的主題色，而不用一項一項的修改 CSS 樣式。

Theme 主題切換

從前面的說明中可以得知，宣告 Theme 相關的 CSS Variables 時通常會將變數的定義寫在 :root 的區塊中讓全域的 element 元件都可以取用，這意思就是說 CSS 變數需要定義在 document.documentElement 的 element 上，一般而言就是 <html> 這個 element。

而在進行主題切換時，也可以透過 document.documentElement 的屬性或加上 class 來讓 CSS 變數可以透過選擇器 (Selector) 來進行切換。

比方說我們定義一個 CSS 樣式，透過 document.documentElement 屬性選擇器切換 --bg-color CSS 變數的定義值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
[data-theme="light"] {
    --bg-color: #FFFFFF; /* white */
}
[data-theme="dark"] {
    --bg-color: #000000; /* black */
}

body {
    backgrourd-color: var(--bg-color);
}

▲範例：透過 Element Attribute 來切換 CSS Variable 的值

當 <html> element 的 data-theme 屬性值改變時 (如下範例)，頁面的背景顏色就會因為 CSS 變數值改變而切換成相對應的主題。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[HTML]

<!-- light mode -->
<html data-theme="light">
    <body></body>
</html>

<!-- dark mode -->
<html data-theme="dark">
    <body></body>
</html>

在 WebComponent 中使用 CSS 變數

WebComponent 是常用的 element 封裝技術，透過 ShadowDOM 的使用，可以做到隔離 (isolation) ，讓自行定義的元件 ShadowDOM 內部與 host 頁面中的 CSS樣式及 JavaScript 程式碼不會互相汙染。

在 ShadowDOM 中，我們也可以使用 host 頁面中 :root 裡面定義的 CSS 變數，但如果是在 WebComponent 中要定義或自行宣告 CSS 變數時，建議可以在 :host 這個元素上進行，這樣做的好處是，可以確保自定義元件的 CSS 的封閉性，避免汙染 host 頁面中的 CSS 樣式，範例如下：

1
2
3
4
5
6
7
:host {
    --primary-color: #209cff;
}

button {
    backgrourd-color: var(--primary-color);
}

要在 WebComponent 上進行主題切換時，也可以透過在自定義的 customElement 上的屬性來進行切換，如:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
:host {
    --bg-color: white;
}
:host([data-theme="dark"]) {
    --bg-color: black;
}

.container {
    backgrourd-color: var(--bg-color);
}

—

1
2
3
4
5
6
7
8
9
[HTML]

<custom-element data-theme="light">
    #shadow-root (open)
</custom-element>

<custom-element data-theme="dark">
    #shadow-root (open)
</custom-element>

搭配 TailwindCSS 使用

使用 Tailwind 進行前端樣式開發時通常會定義一個 tailwind.config.js，將團隊中定義好的樣式規格寫在裡面，而 TailwindCSS 也支援將 CSS 變數定義到 tailwind.config.js 裏面，範例如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// tailwind.config.js

module.exports = {
    //...

    theme: {
        colors: {
            'primary': 'var(--primary-color)',
            'secondary': 'var(--secondary-color)',
            'gray': {
                100: 'var(--gray-100)',
                200: 'var(--gray-200)',
                600: 'var(--gray-600)'
            }
        }
    },

    //...
}

結語

CSS Variables 為現代前端開發提供了一個優雅且強大的方案來處理主題切換的需求。透過這個功能，我們可以：

在不使用 CSS 預處理器的情況下，實現變數化的樣式管理
輕鬆實現 light/dark mode 等主題切換功能
在 WebComponent 中維持樣式的封裝性
與 TailwindCSS 等現代化工具完美整合

相較於傳統的樣式管理方式，CSS Variables 不僅讓程式碼更容易維護，也提供了更好的效能表現。隨著瀏覽器對 CSS Variables 的支援度越來越完善，這絕對是值得前端開發者掌握的重要技術。

如果您正在規劃開發需要主題切換功能的專案，CSS Variables 會是一個值得考慮的解決方案。它不僅能夠滿足基本的主題切換需求，更能透過與現代前端工具的整合，為您的專案提供更多的可能性。

Theme 主題切換#

在 WebComponent 中使用 CSS 變數#

搭配 TailwindCSS 使用#

結語#

Theme 主題切換

在 WebComponent 中使用 CSS 變數

搭配 TailwindCSS 使用

結語