CSS怎样实现暗黑模式切换？CSS变量控制

prefers-color-scheme

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: blue;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #333;
    --text-color: #eee;
    --link-color: lightblue;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

<button id="theme-toggle">切换主题</button>

<script>
  const themeToggle = document.getElementById('theme-toggle');
  themeToggle.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
  });
</script>

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: blue;
}

body.dark-mode {
  --bg-color: #333;
  --text-color: #eee;
  --link-color: lightblue;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

@media (prefers-color-scheme: dark) {
  /* 默认暗黑模式，但会被手动切换覆盖 */
}

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;
const darkModeClass = 'dark-mode';

// 从 localStorage 加载主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  body.classList.add(darkModeClass);
}

themeToggle.addEventListener('click', () => {
  body.classList.toggle(darkModeClass);

  // 保存主题到 localStorage
  if (body.classList.contains(darkModeClass)) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

filter

invert

brightness

img {
  filter: invert(0); /* 默认不反转 */
}

@media (prefers-color-scheme: dark) {
  img {
    filter: invert(1); /* 暗黑模式下反转 */
  }
}

/* 或者 */

.logo {
  content: url("logo-light.png");
}

@media (prefers-color-scheme: dark) {
  .logo {
    content: url("logo-dark.png");
  }
}

body {
  transition: background-color 0.3s, color 0.3s;
}