面试题：JavaScript利用CSS变量实现主题切换

Question

假设页面中有一个切换主题的需求，使用JavaScript结合CSS变量，实现点击按钮切换页面整体主题颜色（如白天主题和黑夜主题），详细说明思路并给出关键代码。

Answer 1

思路

1. 在CSS中定义主题相关的变量，如颜色等。
2. 在HTML中创建按钮用于触发主题切换。
3. 使用JavaScript获取按钮元素，并为其添加点击事件监听器。
4. 在点击事件处理函数中，通过操作文档的styleSheets或直接修改元素的style属性来切换CSS变量的值，从而实现主题切换。

关键代码

1. CSS部分：

:root {
  --primary-color: white;
  --background-color: lightgray;
}
.dark-theme {
  --primary-color: black;
  --background-color: darkgray;
}
body {
  color: var(--primary-color);
  background-color: var(--background-color);
}

2. HTML部分：

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

3. JavaScript部分：

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