實現(xiàn)網(wǎng)頁暗模式切換的關鍵在於HTML結(jié)構(gòu)、CSS樣式分離和JavaScript控制類名及持久化存儲。首先，添加按鈕元素：切換暗色模式；其次，在CSS中定義body默認樣式和.dark-mode類樣式；接著，用JavaScript監(jiān)聽按鈕點擊事件並切換類名：document.body.classList.toggle('dark-mode')；然後，使用localStorage保存用戶偏好，頁面加載時讀取狀態(tài)並恢復對應模式；最後，可選自動檢測系統(tǒng)偏好並優(yōu)先用戶存儲設置。通過這些步驟即可實現(xiàn)完整的暗模式切換功能。

暗模式切換功能現(xiàn)在幾乎成了網(wǎng)頁標配，實現(xiàn)起來其實不復雜。用CSS 搭配一點HTML 和JavaScript 就能搞定，關鍵是理解怎麼控制主題切換和持久化用戶偏好。

基本結(jié)構(gòu)：HTML 樣式分離

先從結(jié)構(gòu)入手，核心是給頁面加一個開關按鈕，並為“亮”“暗”兩種狀態(tài)定義不同的樣式。 HTML 裡放個按鈕：

 <button id="darkModeToggle">切換暗色模式</button>

然後在CSS 中使用類名來區(qū)分明暗樣式，比如給body添加.dark-mode類時改變背景和文字顏色：

 body {
  background-color: #fff;
  color: #333;
}

body.dark-mode {
  background-color: #121212;
  color: #e6e6e6;
}

這樣只要通過JS 切換類名，就能實現(xiàn)基本的切換效果。

切換邏輯：用JavaScript 控制類名

接下來就是讓按鈕真正動起來。 JavaScript 的任務很簡單：監(jiān)聽點擊事件，切換body 上的類名。

 document.getElementById('darkModeToggle').addEventListener('click', function () {
  document.body.classList.toggle('dark-mode');
});

這段代碼的意思是每次點按鈕，就在body 上加或去掉dark-mode這個類。結(jié)合前面寫的CSS，就實現(xiàn)了視覺上的切換。

記住用戶選擇：用localStorage 存狀態(tài)

用戶點了暗模式，刷新又變回去了？這就需要把用戶的偏好存起來?？梢杂脼g覽器提供的localStorage來記住當前狀態(tài)。

修改一下JS 部分：

 const toggleButton = document.getElementById('darkModeToggle');

// 頁面加載時檢查存儲的狀態(tài)if (localStorage.getItem('darkMode') === 'enabled') {
  document.body.classList.add('dark-mode');
}

toggleButton.addEventListener('click', function () {
  document.body.classList.toggle('dark-mode');

  // 如果當前有dark-mode 類，就保存狀態(tài)if (document.body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
});

這樣一來，即使頁面刷新，也能根據(jù)本地存儲恢復用戶的偏好設置。

可選優(yōu)化：自動檢測系統(tǒng)偏好

如果你希望默認跟隨系統(tǒng)設置，可以加一段判斷：

 if (
  window.matchMedia &&
  window.matchMedia('(prefers-color-scheme: dark)').matches
) {
  document.body.classList.add('dark-mode');
}

不過要注意，如果用戶已經(jīng)手動設置了偏好（存在localStorage），就應該優(yōu)先使用用戶的選擇，而不是系統(tǒng)默認。

基本上就這些。整個流程清晰、實現(xiàn)簡單，但細節(jié)上要處理好狀態(tài)同步和存儲機制。你可以根據(jù)自己項目的需求進一步封裝或者用框架實現(xiàn)。

以上是如何使用CSS創(chuàng)建暗模式切換的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！