暗黑模式实现

暗黑模式实现

暗黑模式已成为现代Web设计的标配功能，通过降低屏幕亮度减少眼睛疲劳。CSS3提供了多种实现方式，从基础的颜色变量到媒体查询结合系统偏好。

基础颜色变量方案

使用CSS自定义属性是实现主题切换最灵活的方式。定义两套颜色变量并通过类名切换：

:root {
  --bg-primary: #ffffff;
  --text-primary: #333333;
  --accent-color: #0066cc;
}

[data-theme="dark"] {
  --bg-primary: #121212;
  --text-primary: #e0e0e0;
  --accent-color: #4dabf5;
}

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

JavaScript切换逻辑示例：

const toggle = document.querySelector('#theme-toggle');
toggle.addEventListener('click', () => {
  document.documentElement.setAttribute(
    'data-theme',
    document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
  );
});

结合系统偏好设置

CSS媒体查询可以自动匹配用户系统主题偏好：

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

更完善的实现应该同时考虑用户手动选择和系统偏好：

// 检测系统偏好并设置初始主题
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
}

// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
});

图像与SVG适配

暗黑模式下需要特别处理媒体资源。使用CSS滤镜调整图片亮度：

[data-theme="dark"] img:not(.no-filter) {
  filter: brightness(0.8) contrast(1.2);
}

/* SVG图标颜色适配 */
[data-theme="dark"] .icon {
  fill: #9e9e9e;
}

对于背景图片，可以使用混合模式：

.hero {
  background-image: url('day-image.jpg');
  background-blend-mode: multiply;
}

[data-theme="dark"] .hero {
  background-image: url('night-image.jpg');
}

复杂组件的主题化

表单元素需要特别注意，以下是自定义复选框的暗黑适配：

.checkbox {
  --checkbox-border: #757575;
  --checkbox-bg: transparent;
}

[data-theme="dark"] .checkbox {
  --checkbox-border: #9e9e9e;
  --checkbox-bg: #424242;
}

.checkbox-input:checked + .checkbox-label::before {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

动画与过渡优化

主题切换时添加平滑过渡能提升用户体验：

:root {
  --transition-duration: 0.4s;
  --transition-easing: cubic-bezier(0.645, 0.045, 0.355, 1);
}

* {
  transition: background-color var(--transition-duration) var(--transition-easing),
              color var(--transition-duration) var(--transition-easing),
              border-color var(--transition-duration) var(--transition-easing);
}

/* 排除性能敏感元素 */
img, svg, iframe {
  transition: none !important;
}

存储用户偏好

使用localStorage持久化用户选择：

// 初始化时读取存储
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.documentElement.setAttribute('data-theme', savedTheme);
}

// 切换时保存
function toggleTheme() {
  const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
  document.documentElement.setAttribute('data-theme', newTheme);
  localStorage.setItem('theme', newTheme);
}

高级色彩方案

考虑使用HSL色彩空间更灵活地调整主题：

:root {
  --hue: 210;
  --sat: 100%;
  --light: 98%;
  --text-hue: 0;
  --text-sat: 0%;
  --text-light: 20%;
}

[data-theme="dark"] {
  --light: 15%;
  --text-light: 90%;
}

.button {
  background: hsl(var(--hue), var(--sat), var(--light));
  color: hsl(var(--text-hue), var(--text-sat), var(--text-light));
}

性能优化技巧

减少重绘范围提高切换性能：

/* 将过渡限制在必要元素 */
body, .card, input, button {
  transition: background-color 0.3s, color 0.3s;
}

/* 禁用某些元素的过渡 */
.no-transition, .no-transition * {
  transition: none !important;
}

无障碍考虑

确保暗黑模式下的对比度符合WCAG标准：

[data-theme="dark"] {
  --text-primary: #e0e0e0;  /* 至少4.5:1对比度在深灰背景上 */
}

/* 高对比度模式支持 */
@media (prefers-contrast: more) {
  :root {
    --text-primary: #000000;
    --bg-primary: #ffffff;
  }
  
  [data-theme="dark"] {
    --text-primary: #ffffff;
    --bg-primary: #000000;
  }
}

框架集成示例

在React中实现主题切换组件：

import { useEffect, useState } from 'react';

function ThemeToggle() {
  const [theme, setTheme] = useState(() => {
    if (typeof window !== 'undefined') {
      return localStorage.getItem('theme') || 
             (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    }
    return 'light';
  });

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
  }, [theme]);

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      {theme === 'dark' ? '☀️' : '🌙'}
    </button>
  );
}

服务端渲染处理

对于SSR应用，需要在HTML初始渲染时注入正确的主题类：

// Express中间件示例
app.use((req, res, next) => {
  const theme = req.cookies.theme || 
               (req.headers['sec-ch-prefers-color-scheme'] === 'dark' ? 'dark' : 'light');
  res.locals.theme = theme;
  next();
});

// 在模板引擎中使用
<html data-theme="<%= theme %>">

渐变与阴影调整

暗黑模式下需要重新调整阴影效果：

.card {
  --shadow-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px var(--shadow-color);
}

[data-theme="dark"] .card {
  --shadow-color: rgba(0, 0, 0, 0.4);
  border: 1px solid #333;
}

动态主题生成

基于基础色生成完整主题方案：

function generateTheme(baseColor) {
  const root = document.documentElement;
  const hsl = hexToHSL(baseColor);
  
  root.style.setProperty('--primary-hue', hsl.h);
  root.style.setProperty('--primary-sat', `${hsl.s}%`);
  root.style.setProperty('--primary-light', `${hsl.l}%`);
  
  // 生成衍生颜色
  for (let i = 0; i < 10; i++) {
    const lightness = 90 - (i * 8);
    root.style.setProperty(`--primary-${i}`, 
      `hsl(${hsl.h}, ${hsl.s}%, ${lightness}%)`);
  }
}

测试与验证

使用自动化工具验证主题切换：

describe('Dark Mode Toggle', () => {
  before(() => {
    cy.visit('/');
  });

  it('should switch themes', () => {
    cy.get('html').should('have.attr', 'data-theme', 'light');
    cy.get('#theme-toggle').click();
    cy.get('html').should('have.attr', 'data-theme', 'dark');
    cy.window().then(win => {
      expect(win.localStorage.getItem('theme')).to.equal('dark');
    });
  });
});

浏览器兼容性处理

针对旧版浏览器的回退方案：

/* 不支持CSS变量的回退 */
body {
  background: #ffffff;
  color: #333333;
}

/* 现代浏览器覆盖 */
@supports (--css: variables) {
  body {
    background: var(--bg-primary);
    color: var(--text-primary);
  }
}

设计系统集成

将暗黑模式变量整合到设计系统中：

// _variables.scss
$themes: (
  light: (
    bg-primary: #ffffff,
    text-primary: #333333,
    border-color: #e0e0e0
  ),
  dark: (
    bg-primary: #121212,
    text-primary: #e0e0e0,
    border-color: #424242
  )
);

// 主题混合器
@mixin theme() {
  @each $theme, $map in $themes {
    [data-theme="#{$theme}"] & {
      $theme-map: $map !global;
      @content;
      $theme-map: null !global;
    }
  }
}

// 变量访问函数
@function themed($key) {
  @return map-get($theme-map, $key);
}

// 使用示例
.card {
  @include theme {
    background: themed('bg-primary');
    border: 1px solid themed('border-color');
  }
}

移动端特殊处理

针对移动设备优化过渡效果：

/* 禁用移动设备上的过渡减少性能开销 */
@media (hover: none) and (pointer: coarse) {
  * {
    transition-duration: 0.01ms !important;
  }
}

主题同步策略

多标签页同步主题状态：

// 主标签页
window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    document.documentElement.setAttribute('data-theme', event.newValue);
  }
});

// 广播主题变化到其他标签页
function broadcastTheme(theme) {
  localStorage.setItem('theme', theme);
  if (navigator.broadcastChannel) {
    const bc = new BroadcastChannel('theme_channel');
    bc.postMessage({ theme });
    setTimeout(() => bc.close(), 500);
  }
}