css前端主题切换方案(三种)

在CSS中实现前端主题切换可以通过以下三种方案：

1. 使用CSS变量（Custom Properties）：

:root {
  --background-color: #fff;
  --text-color: #000;
}
 
.theme-dark {
  --background-color: #000;
  --text-color: #fff;
}
 
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

2. 使用CSS媒体查询来根据时间实现自动切换主题：

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
  }
}
 
@media (prefers-color-scheme: light) {
  body {
    background-color: #fff;
    color: #000;
  }
}

3. 使用JavaScript来手动切换主题：

function switchTheme(isDarkMode) {
  if (isDarkMode) {
    document.body.classList.add('theme-dark');
  } else {
    document.body.classList.remove('theme-dark');
  }
}
 
// 监听按钮点击事件来切换主题
document.getElementById('theme-toggle-button').addEventListener('click', function() {
  var isDarkMode = localStorage.getItem('isDarkMode') === '1';
  switchTheme(!isDarkMode);
  localStorage.setItem('isDarkMode', !isDarkMode);
});
 
// 页面初始化时应用主题
if (localStorage.getItem('isDarkMode') === '1') {
  switchTheme(true);
}

在这个JavaScript示例中，我们使用了localStorage来记住用户的选择并在页面加载时应用相应的主题。同时，我们添加了一个按钮来手动切换主题，并在点击时保存选择。