要實現(xiàn)深色模式，可採用三種方法：1. 使用prefers-color-scheme 媒體查詢檢測系統(tǒng)偏好，自動應(yīng)用深色樣式；2. 利用CSS 自定義屬性統(tǒng)一管理顏色主題，提升維護效率並便於後續(xù)擴展；3. 添加按鈕通過JavaScript 實現(xiàn)手動切換主題，並結(jié)合localStorage 保存用戶選擇。這三種方式結(jié)合，能實現(xiàn)優(yōu)先響應(yīng)系統(tǒng)設(shè)置且支持用戶自定義的完整方案。

實現(xiàn)深色模式（Dark Mode）現(xiàn)在已經(jīng)成為現(xiàn)代網(wǎng)頁設(shè)計中的一個標(biāo)準(zhǔn)功能。如果你希望你的網(wǎng)站能根據(jù)用戶的系統(tǒng)偏好自動切換主題，或者讓用戶手動選擇深色/淺色模式，使用CSS 媒體查詢和自定義屬性是一個簡單而有效的方式。

1. 使用prefers-color-scheme媒體查詢檢測用戶偏好

CSS 提供了一個非常實用的媒體特性： prefers-color-scheme ，它可以檢測用戶的操作系統(tǒng)是否設(shè)置了深色或淺色模式。

 @media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #eaeaea;
  }
}

這樣寫之後，如果用戶啟用了系統(tǒng)的深色模式，頁面就會應(yīng)用你設(shè)置的深色樣式。這個方法的好處是無需任何JavaScript ，純CSS 實現(xiàn)，對性能友好。

注意：這種方式只能響應(yīng)用戶的系統(tǒng)設(shè)置，不能讓用戶在網(wǎng)頁內(nèi)手動切換主題。

2. 利用CSS 自定義屬性（變量）統(tǒng)一管理顏色主題

為了更靈活地控制不同模式下的樣式，推薦使用CSS 變量來集中定義顏色值。

 :root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #eaeaea;
  }
}

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

這種方法的優(yōu)點是：

• 樣式統(tǒng)一管理，方便維護
• 模式切換時只需修改變量值，不需要重複寫樣式
• 後續(xù)結(jié)合JS 手動切換主題也更容易實現(xiàn)

3. 添加按鈕手動切換主題（可選）

如果你想讓用戶在頁面上自己選擇主題，可以通過JavaScript 動態(tài)修改CSS 變量。

HTML 中添加切換按鈕：

 <button id="theme-toggle">切換主題</button>

JS 控制邏輯示例：

 const toggleButton = document.getElementById('theme-toggle');

toggleButton.addEventListener('click', () => {
  const currentTheme = document.documentElement.getAttribute('data-theme');
  if (currentTheme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  }
});

然後在CSS 中定義對應(yīng)的主題變量：

 :root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #333333;
}

:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #eaeaea;
}

這樣就能實現(xiàn)“優(yōu)先響應(yīng)系統(tǒng)設(shè)置支持手動切換”的雙重機制了。

小技巧：可以讀取用戶之前的選擇並保存到localStorage ，下次訪問時直接應(yīng)用他們偏好的主題。

基本上就這些。通過媒體查詢判斷系統(tǒng)偏好、用CSS 變量統(tǒng)一管理顏色、再加上JS 的手動切換能力，就可以實現(xiàn)一個完整又輕量的深色模式方案。不復(fù)雜但容易忽略的是變量命名和狀態(tài)持久化這些細(xì)節(jié)，稍不注意可能會影響體驗。

以上是使用媒體查詢和自定義屬性實施CSS暗模式的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！