CSS 變量，也稱為自訂屬性，提供了一種靈活有效的方法來實現跨 Web 應用程式的主題自訂。透過在一個地方定義可重複使用的值，您可以輕鬆地在整個網站中管理和應用主題，而無需在程式碼中重複自己。

在本部落格中，我們將探討如何使用 CSS 變數進行主題定制，以及為什麼這種方法有利於現代網頁設計。

什麼是 CSS 變數？

CSS 變數可讓您儲存值以便在樣式表中重複使用。您可以將它們視為佔位符，可以在一個位置進行更新，但會反映在整個 CSS 檔案中。

這是定義和使用 CSS 變數的簡單範例：

:root {
  --primary-color: #3498db;
}

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

在此範例中，--primary-color 是變量，您可以在任何需要的地方使用 var() 函數存取它。 :root 選擇器在全域層級定義變量，這意味著可以在樣式表中的任何位置存取它。

為什麼對主題使用 CSS 變數？

當建立需要多個主題（如淺色和深色模式）的應用程式時，CSS 變數會發揮作用。您可以將這些值儲存在變數中並透過動態變更值來切換主題，而不是在整個樣式表中硬編碼顏色或字體大小。

讓我們深入探討 CSS 變數構成主題的一些關鍵原因
客製化更易於管理：

• 跨元件的一致性：透過使用變量，您的 UI 元件將保持一致。當您需要更新主題顏色或字體大小時，只需在單個位置進行調整即可。

• 動態主題切換：您可以透過動態更新 CSS 變數值，使用 JavaScript 輕鬆切換主題，無需重新載入頁面即可實現即時主題變更。

• 更容易維護：使用變數時更新設計系統要容易得多。例如，如果您需要調整主顏色，只需在一個位置進行更改，並且更改將傳播到整個網站。

使用 CSS 變數實現主題定制

假設我們想使用 CSS 變數來建立一個簡單的深色模式和淺色模式主題切換器。我們首先在 :root 選擇器中定義預設（輕）主題的主題變數：

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

接下來，我們透過更新自訂類別中的變數值來定義深色主題。在主題之間切換時會切換該類別：

.dark-mode {
  --background-color: #2c3e50;
  --text-color: #ecf0f1;
}

透過此設置，剩下的就是當使用者切換主題時使用 JavaScript 在 body 元素上切換暗模式類別：

const toggleTheme = () => {
  document.body.classList.toggle('dark-mode');
};

高級主題定制

CSS 變數不限於顏色。您可以將它們用於任何 CSS 屬性，例如字體、間距甚至動畫。以下是自訂字體大小的範例：

:root {
  --base-font-size: 16px;
  --heading-font-size: 2rem;
}

body {
  font-size: var(--base-font-size);
}

h1 {
  font-size: var(--heading-font-size);
}

此等級的控制不僅允許您動態調整顏色，還可以動態調整主題的整體外觀和感覺。

輔助功能注意事項

在實現主題客製化時，考慮可訪問性非常重要。確保您的主題在背景和文字顏色之間提供足夠的對比度，以適應有視覺障礙的使用者。 WebAIM 的對比度檢查器等工具可以幫助您確保您的主題符合無障礙標準。

結論

CSS 變數提供了一種強大的方式來自訂主題，確保整個設計的一致性，同時使更新和主題切換變得簡單。無論您是建立簡單的網站還是複雜的 Web 應用程序，將 CSS 變數整合到您的工作流程中都可以簡化您的開發流程並提高可維護性。

透過利用這種技術，您將為用戶提供無縫、動態的體驗，可以適應他們的偏好——所有這些都只需最少的程式碼變更。