如何通过点击按钮修改CSS根样式文件的颜色变量实现主题切换？

基础实现步骤 #

1. CSS 根变量定义
   确保CSS变量定义在:root伪类下（全局作用域），这样所有元素都能引用：

:root {
  --background-blue-primary: #005a9e;
}

/* 示例：使用变量的页面元素 */
body {
  background-color: var(--background-blue-primary);
  transition: background-color 0.3s ease; /* 可选：添加平滑过渡动画 */
}

2. HTML 切换按钮
   在主HTML文件中添加主题切换按钮：

<button id="themeToggle">切换主题</button>

3. JavaScript 实现切换逻辑
   通过JS获取按钮并绑定点击事件，动态修改根元素的CSS变量值：

const themeToggleBtn = document.getElementById('themeToggle');
// 定义两种主题对应的颜色值
const lightThemeColor = '#005a9e';
const darkThemeColor = '#1a365d';

themeToggleBtn.addEventListener('click', () => {
  // 获取当前生效的变量值
  const currentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-blue-primary').trim();
  
  // 根据当前值切换到对应主题颜色
  const newColor = currentColor === lightThemeColor ? darkThemeColor : lightThemeColor;
  
  // 设置新的变量值
  document.documentElement.style.setProperty('--background-blue-primary', newColor);
});

进阶：保存主题偏好（刷新页面不丢失） #

如果希望用户切换主题后，刷新页面仍保持选择状态，可以用localStorage存储主题信息：

const themeToggleBtn = document.getElementById('themeToggle');
const lightThemeColor = '#005a9e';
const darkThemeColor = '#1a365d';

// 页面加载时恢复保存的主题
window.addEventListener('DOMContentLoaded', () => {
  const savedTheme = localStorage.getItem('themeColor');
  if (savedTheme) {
    document.documentElement.style.setProperty('--background-blue-primary', savedTheme);
  }
});

themeToggleBtn.addEventListener('click', () => {
  const currentColor = getComputedStyle(document.documentElement).getPropertyValue('--background-blue-primary').trim();
  const newColor = currentColor === lightThemeColor ? darkThemeColor : lightThemeColor;
  
  document.documentElement.style.setProperty('--background-blue-primary', newColor);
  // 将主题颜色保存到本地存储
  localStorage.setItem('themeColor', newColor);
});

原理说明 #

• document.documentElement对应HTML文档的根元素（<html>标签），而CSS中的:root伪类就是指向这个元素，所以修改它的style属性就能覆盖全局CSS变量。
• getComputedStyle用于获取当前页面中实际生效的变量值，以此判断当前主题状态。

内容的提问来源于stack exchange，提问作者Radin