利用var()实现主题切换

const themeColor = {
  "text-color": {
    "light": '#fff',
    "dark": '#000'
  },
  "text-bgc": {
    "light": 'white',
    "dark": 'black'
  }
};

function setTheme(theme) {
  const root = document.documentElement;
  
  for (const key in theme) {
    root.style.setProperty(`--${key}`, theme[key]);
  }
}

// 初始设置为 light 主题
setTheme(themeColor["text-color"]["light"]);

// 切换主题
function toggleTheme() {
  const currentTheme = getComputedStyle(document.documentElement).getPropertyValue('--text-color');  const newTheme = currentTheme === themeColor["text-color"]["light"] ? themeColor["text-color"]["dark"] : themeColor["text-color"]["light"];
  setTheme(newTheme);
}

在Vue 3中，您可以使用reactive函数和watch API来实现页面主题切换。下面是一个使用Vue 3语法的示例：