使用prefers-color-scheme 媒體查詢可自動檢測用戶系統(tǒng)偏好並應(yīng)用暗色模式；2. 通過添加class 類和少量JavaScript 實現(xiàn)手動切換功能，並將用戶選擇存儲在localStorage 中；3. 使用語義化CSS 自定義屬性定義顏色變量，提升主題可維護性並便於擴展更多主題；4. 為背景、文字等關(guān)鍵屬性添加平滑過渡動畫以優(yōu)化體驗，並結(jié)合prefers-reduced-transparency 照顧對動畫敏感的用戶；5. 設(shè)置color-scheme 屬性使瀏覽器原生控件如表單和滾動條自動適配主題。通過這五步，用現(xiàn)代CSS 即可實現(xiàn)兼顧自動檢測、手動控制與良好體驗的暗色模式。

Dark mode isn't just a trend—it's a usability feature users increasingly expect. With modern CSS, implementing a robust dark mode has never been easier. You don't need heavy JavaScript or complex frameworks. Here's how to do it right using today's best practices.

1. Use prefers-color-scheme for Automatic Detection

The foundation of a modern dark mode implementation is the CSS media query prefers-color-scheme . It detects the user's system preference and applies styles accordingly.

 /* Default light theme */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #121212;
    --text-color: #e0e0e0;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

This approach respects user preference out of the box. No extra steps needed—just ship it and it works for anyone with system dark mode enabled.

2. Add a Toggle with CSS Custom Properties

While respecting system settings is great, many users want manual control. You can enable a toggle using a class-based approach with minimal JavaScript.

HTML:

 <button id="theme-toggle">Toggle Dark Mode</button>

CSS:

 /* Override with user preference */
.dark-mode {
  --bg-color: #121212;
  --text-color: #e0e0e0;
}

JavaScript:

 const toggle = document.getElementById('theme-toggle');
toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  // Optionally save preference
  const isDark = document.body.classList.contains('dark-mode');
  localStorage.setItem('dark-mode', isDark);
});

On page load, restore the user's choice:

 if (localStorage.getItem('dark-mode') === 'true') {
  document.body.classList.add('dark-mode');
}

Now you have both automatic detection and manual override.

3. Design with Semantic CSS Variables

Instead of hardcoding colors for light and dark, define semantic variables. This makes your theme more maintainable and scalable.

 :root {
  /* Semantic variables */
  --text-primary: #212121;
  --bg-surface: #ffffff;
  --border-color: #ddd;
  --card-bg: #f8f9fa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #e0e0e0;
    --bg-surface: #121212;
    --border-color: #444;
    --card-bg: #1e1e1e;
  }
}

.card {
  background: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

This way, you're not tied to “dark” or “l(fā)ight”—you're designing for context. It also makes adding a third theme (eg, sepia) much easier later.

4. Smooth Transitions and Performance

Abrupt theme switches feel jarring. Use CSS transitions to smooth the change:

 * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

Avoid animating too many properties at once—focus on key visual elements. Also, consider using prefers-reduced-transparency for users who want less motion:

 @media (prefers-reduced-transparency: no-preference) {
  * {
    transition: background-color 0.3s ease, color 0.3s ease;
  }
}

Bonus: Use color-scheme for Native Elements

Tell the browser to style native form controls and scrollbars appropriately:

 :root {
  color-scheme: light dark;
}

This ensures inputs, checkboxes, and scrollbars adapt to your theme automatically—especially helpful in Firefox and Chromium.

Basically, modern dark mode is about combining user preference, clean CSS architecture, and thoughtful UX. With prefers-color-scheme , custom properties, and a simple toggle, you can deliver a polished experience with minimal code.

以上是用現(xiàn)代CSS技術(shù)實施黑暗模式的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！