CSS 变量实现主题切换

1. 默认配色：

:root {
  --bg: white;
  --text-color: #555;
  --link-color: #639a67;
  --link-hover: #205d67;
}
body {
  background: var(--bg);
  color: var(--text-color);
}

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

2. 粉色主题配色

.pink-theme {
  --bg: hotpink;
  --text-color: white;
  --link-color: purple;
  --link-hover: orange;
}

3. 切换主题的代码：

const toggleBtn = document.querySelector('.toggle-theme');

toggleBtn.addEventListener('click', (e) => {
  e.preventDefault();

  if (document.body.classList.contains('pink-theme')) {
    document.body.classList.remove('pink-theme');

    toggleBtn.innerText = '切换正常主题色';
  } else {
    document.body.classList.add('pink-theme');

    toggleBtn.innerText = '切换粉色主题';
  }
});