CSS 變量（CSS Variables）是 CSS3 新增的一項特性，可以定義一組全局的變量，方便在各種 CSS 操作中重用。在頁面換膚等場景中，可以利用 CSS 變量來實現不同主題顏色的切換。

:root {
--bg-color: #fff;
--text-color: #333;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.dark {
--bg-color: #333;
--text-color: #fff;
}

在上面的代碼中，`--bg-color` 和 `--text-color` 是自定義的 CSS 變量，`--bg-color` 初值為白色，`--text-color` 初值為黑色。在 `body` 中使用這兩個變量來設置頁面的背景色和文本顏色。當用戶切換到暗色主題時，只需要添加一個名為 `.dark` 的類名，同時為 `.dark` 中定義的變量重新賦值即可。

button {
background-color: var(--button-bg-color);
color: var(--button-text-color);
border-color: var(--button-border-color);
}
.orange {
--button-bg-color: #fd9644;
--button-text-color: #fff;
--button-border-color: #fd9644;
}
.blue {
--button-bg-color: #2bcbba;
--button-text-color: #fff;
--button-border-color: #2bcbba;
}

除了全局變量，在局部作用域中也可以定義 CSS 變量以進行局部樣式調整。上面代碼中的 `button` 元素中使用了三個 CSS 變量 — `--button-bg-color`、`--button-text-color`、`--button-border-color` 來分別設置按鈕的背景色、文字顏色和邊框顏色。當用戶選擇不同的主題時，只需要為相應的主題重新賦值即可。

通過使用 CSS 變量來換膚，可以大大減少主題切換時的代碼量和減少開發成本，同時也方便用戶根據自己的喜好選擇不同的主題，提升用戶的使用體驗。