Web应用明暗模式实现：是否需独立CSS文件？

完全不需要创建两个独立的CSS文件，仅用单个CSS文件配合CSS自定义属性（变量）和少量JavaScript就能高效实现明暗模式切换，同时还能兼顾系统自动适配和用户手动切换的需求，具体实现方式如下：

1. 用CSS变量定义主题样式 #

在根元素:root中定义浅色模式的基础变量，再通过自定义属性（比如data-theme="dark"）覆盖深色模式下的变量值，所有页面元素直接引用这些变量即可：

/* 浅色模式默认变量 */
:root {
  --bg-color: #ffffff;
  --text-color: #121212;
  --card-bg: #f9fafb;
  --border-color: #e5e7eb;
}

/* 深色模式变量覆盖 */
[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f3f4f6;
  --card-bg: #1f2937;
  --border-color: #374151;
}

/* 页面元素使用变量 */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

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

2. 适配系统主题偏好（可选） #

如果希望默认跟随用户系统的明暗设置，可以配合prefers-color-scheme媒体查询实现自动适配，同时不影响手动切换：

@media (prefers-color-scheme: dark) {
  /* 当用户未手动设置时，跟随系统深色模式 */
  :root:not([data-theme]) {
    --bg-color: #121212;
    --text-color: #f3f4f6;
    --card-bg: #1f2937;
    --border-color: #374151;
  }
}

3. 用JavaScript实现手动切换与偏好记忆 #

添加简单的JS代码实现一键切换，并将用户选择保存到localStorage，下次打开页面时自动应用：

// 切换主题函数
function toggleTheme() {
  const root = document.documentElement;
  const currentTheme = root.getAttribute('data-theme');
  const targetTheme = currentTheme === 'dark' ? 'light' : 'dark';
  
  root.setAttribute('data-theme', targetTheme);
  localStorage.setItem('user-selected-theme', targetTheme);
}

// 页面加载时恢复用户偏好
document.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('user-selected-theme');
  const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
  const applyTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
  
  document.documentElement.setAttribute('data-theme', applyTheme);
});

这种方案的优势在于：代码集中维护，无需管理多个CSS文件；切换时仅修改根元素属性，样式切换流畅无加载延迟；同时支持系统自动适配和用户手动选择，体验更完善。

内容的提问来源于stack exchange，提问作者Sam