如何使用 JavaScript 動態更改 CSS 變數以進行主題自訂？

使用 CSS 變數和 JavaScript 進行動態主題自訂

透過自訂增強使用者體驗是 Web 開發人員的共同目標。一個有效的方法是利用 CSS 變數和 JavaScript 輕鬆更改網站的主題。

但是，在嘗試實作這樣的系統時，在使用 CSS 的 :root 範圍修改定義的變數時可能會遇到挑戰JavaScript。為了解決這個問題，讓我們探索一個有效解決它的解決方案。

使用 JavaScript 自訂 CSS 變數

以程式設計方式修改 CSS 變數的關鍵在於利用 setProperty( ) document.documentElement 樣式物件的方法。透過傳入變數名稱和所需的值，您可以動態變更變數的值。

document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');

為了說明這一點，請考慮以下範例：

function setPrimaryColor(color) {
  document.documentElement.style.setProperty('--primary-color', color);
}

在此函數中， Primary-color CSS 變數設定為提供的顏色參數。這使您可以透過更改單一 CSS 變數來無縫更新網站的配色方案。

實現主題切換

能夠使用 JavaScript 更改 CSS 變量，您現在可以實現一個強大的主題切換系統。考慮以下程式碼：

const theme = localStorage.getItem('theme');

function setTheme(newTheme) {
  localStorage.setItem('theme', newTheme);
  
  // Apply the appropriate styles based on the selected theme
  switch (newTheme) {
    case 'light':
      document.documentElement.style.setProperty('--primary-color', '#FFFFFF');
      document.documentElement.style.setProperty('--secondary-color', '#000000');
      break;
    case 'dark':
      document.documentElement.style.setProperty('--primary-color', '#000000');
      document.documentElement.style.setProperty('--secondary-color', '#FFFFFF');
      break;
  }
}

// Initialize the theme based on the stored preference
if (theme) {
  setTheme(theme);
} else {
  setTheme('light');
}

此程式碼使用 localStorage 保留使用者的首選主題，並在主題變更時套用對應的樣式。

透過利用 setProperty() 方法並實現主題切換系統，您可以讓使用者輕鬆自訂網站的外觀和感覺。這種方法可讓您建立適應使用者偏好的動態 Web 體驗。

以上是如何使用 JavaScript 動態更改 CSS 變數以進行主題自訂？的詳細內容。更多資訊請關注PHP中文網其他相關文章！