当前位置：首页 > JavaScript

js实现暗黑模式

2026-03-15 21:16:29JavaScript

实现暗黑模式的核心方法

通过JavaScript实现暗黑模式主要涉及CSS变量切换、本地存储状态以及事件监听。以下是具体实现方案：

基础CSS变量定义

在全局CSS中定义两套颜色变量，分别对应亮色和暗色模式：

js实现暗黑模式

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --primary-color: #2563eb;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f5f5f5;
  --primary-color: #3b82f6;
}

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

切换主题的JavaScript逻辑

创建主题切换函数并处理本地存储：

const themeToggle = document.getElementById('theme-toggle');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

// 初始化主题
function initTheme() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else if (prefersDarkScheme.matches) {
    document.documentElement.setAttribute('data-theme', 'dark');
  }
}

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

// 事件监听
themeToggle.addEventListener('click', toggleTheme);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
  if (!localStorage.getItem('theme')) {
    document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light');
  }
});

// 初始化
initTheme();

完整HTML结构示例

<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Mode Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button id="theme-toggle">Toggle Dark Mode</button>
  <script src="theme.js"></script>
</body>
</html>

进阶优化方案

系统偏好同步 通过prefers-color-scheme媒体查询自动匹配用户系统主题偏好：

js实现暗黑模式

if (!localStorage.getItem('theme') && prefersDarkScheme.matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
}

平滑过渡效果 在CSS中添加过渡属性使切换更自然：

:root {
  transition: all 0.3s ease-in-out;
}

图标同步切换 根据主题状态切换图标显示：

function updateIcon() {
  const icon = document.getElementById('theme-icon');
  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
  icon.textContent = isDark ? '🌙' : '☀️';
}