如何更換CSS網(wǎng)頁(yè)的膚色

CSS網(wǎng)頁(yè)的換膚功能可以讓用戶根據(jù)自己的喜好選擇不同的主題顏色，使得網(wǎng)頁(yè)界面更加個(gè)性化和多樣化，在CSS中，我們可以通過(guò)修改樣式表中的顏色值來(lái)實(shí)現(xiàn)換膚功能。

我們需要在HTML中定義一個(gè)可以切換膚色的按鈕，

<button id="change-theme">更換膚色</button>

在CSS中定義不同的主題顏色，

/* 主題顏色1 */
.theme-1 {
  --main-color: #ff0000; /* 紅色 */
  --secondary-color: #00ff00; /* 綠色 */
}
/* 主題顏色2 */
.theme-2 {
  --main-color: #0000ff; /* 藍(lán)色 */
  --secondary-color: #ffff00; /* 黃色 */
}

在JavaScript中編寫一個(gè)函數(shù)來(lái)切換主題顏色，

function changeTheme() {
  var themes = ['theme-1', 'theme-2'];
  var currentTheme = document.body.className;
  var newTheme = themes[themes.indexOf(currentTheme) % 2];
  document.body.className = newTheme;
}

將按鈕與函數(shù)綁定，

document.getElementById('change-theme').addEventListener('click', changeTheme);

通過(guò)以上步驟，我們就可以實(shí)現(xiàn)CSS網(wǎng)頁(yè)的換膚功能了，用戶點(diǎn)擊更換膚色按鈕后，頁(yè)面會(huì)根據(jù)定義的主題顏色進(jìn)行切換，從而實(shí)現(xiàn)個(gè)性化的界面體驗(yàn)。