const toggleDarkMode = () => {
  const html = document.documentElement;
  const currentTheme = html.getAttribute('data-theme');
  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
  html.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme); // 保存用戶選擇
};
// 初始化時讀取本地存儲或系統(tǒng)偏好
const savedTheme = localStorage.getItem('theme') || 
  (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', savedTheme);

(2) 結(jié)合 CSS-in-JS（如 styled-components）

import { ThemeProvider } from 'styled-components';
const lightTheme = { bg: '#fff', text: '#333' };
const darkTheme = { bg: '#121212', text: '#f5f5f5' };
const App = () => {
  const [isDark, setIsDark] = useState(false);
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <button onClick={() => setIsDark(!isDark)}>Toggle Dark Mode</button>
    </ThemeProvider>
  );
};

前端框架適配

(1) React + Context API

import React, { createContext, useContext, useState } from 'react';
const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
  const [darkMode, setDarkMode] = useState(false);
  const toggleTheme = () => setDarkMode(!darkMode);
  return (
    <ThemeContext.Provider value={{ darkMode, toggleTheme }}>
      <div className={darkMode ? 'dark-theme' : 'light-theme'}>
        {children}
      </div>
    </ThemeContext.Provider>
  );
};

(2) Vue.js + Vuex

// store.js
export default new Vuex.Store({
  state: { darkMode: false },
  mutations: {
    toggleDarkMode(state) {
      state.darkMode = !state.darkMode;
    }
  }
});
// App.vue
<template>
  <div :class="{ 'dark-theme': $store.state.darkMode }">
    <button @click="$store.commit('toggleDarkMode')">Toggle</button>
  </div>
</template>

系統(tǒng)級黑暗模式支持

(1) 移動端（Android/iOS）

• Android：通過AppCompatDelegate.setDefaultNightMode()動態(tài)切換。
• iOS：使用UITraitCollection檢測系統(tǒng)主題變化。

(2) 桌面端（Electron）

const { nativeTheme } = require('electron');
nativeTheme.themeSource = 'dark'; // 或 'light' / 'system'

最佳實踐與優(yōu)化

1. 避免純黑背景：使用深灰色（如#121212）而非純黑（#000000）以減少視覺疲勞。
2. 調(diào)整圖像和圖標(biāo)：在黑暗模式下降低亮度或使用SVG濾鏡優(yōu)化顯示效果。
3. 測試對比度：確保文本和UI元素符合WCAG可訪問性標(biāo)準(zhǔn)（至少4.5:1對比度）。
4. 持久化用戶選擇：使用localStorage或Cookie保存用戶偏好。

未來趨勢

隨著Web和操作系統(tǒng)的演進(jìn),黑暗模式的實現(xiàn)將更加智能化：

• 動態(tài)主題引擎：根據(jù)環(huán)境光線自動調(diào)整（如macOS的“自動切換”）。
• CSS Color Level 5：未來的color-mix()和light-dark()函數(shù)將簡化主題管理。

黑暗模式的實現(xiàn)不僅涉及前端技術(shù)，還需要考慮用戶體驗、性能和可訪問性，通過合理運用CSS變量、JavaScript動態(tài)切換和系統(tǒng)API，開發(fā)者可以構(gòu)建靈活且用戶友好的黑暗模式功能，隨著技術(shù)的進(jìn)步，黑暗模式將成為UI設(shè)計的標(biāo)準(zhǔn)配置,而非可選特性。