CSS自定义属性与前端页面的主题切换

/* 定义主题变量 */
:root {
  --primary-bg-color: #fff; /* 默认背景色 */
  --primary-text-color: #000; /* 默认文本颜色 */
}
 
/* 应用主题变量 */
body {
  background-color: var(--primary-bg-color);
  color: var(--primary-text-color);
}
 
/* 切换主题的JavaScript函数 */
function toggleTheme() {
  const currentTheme = localStorage.getItem('theme');
  const theme = currentTheme === 'dark' ? 'light' : 'dark';
  localStorage.setItem('theme', theme);
  document.body.classList.toggle('theme-dark', theme === 'dark');
  document.body.classList.toggle('theme-light', theme === 'light');
}
 
/* 在body上切换主题类 */
body {
  --primary-bg-color: #000; /* 暗色背景色 */
  --primary-text-color: #fff; /* 暗色文本颜色 */
}
 
.theme-dark {
  --primary-bg-color: #fff; /* 亮色背景色 */
  --primary-text-color: #000; /* 亮色文本颜色 */
}
 
/* 用户点击按钮时切换主题 */
<button onclick="toggleTheme()">切换主题</button>

这段代码定义了一个主题切换功能，通过JavaScript函数toggleTheme来改变页面的主题。当用户点击按钮时，会从本地存储中读取当前主题，然后切换到相对的主题，并更新本地存储。同时，通过切换body元素的类来应用新的CSS变量值，从而实现主题的切换。