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

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

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

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

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

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

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

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)點(diǎn)是：

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

3. 添加按鈕手動(dòng)切換主題（可選）

如果你想讓用戶在頁面上自己選擇主題，可以通過 JavaScript 動(dòng)態(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 中定義對(duì)應(yīng)的主題變量：

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

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

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

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

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

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