利用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);
}

<template>
  <div>
    <h1 :style="{ color: themeColor['text-color'][currentTheme] }">Hello, World!</h1>
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    // 定义主题样式对象
    const themeColor = reactive({
      "text-color": {
        "light": 'white',
        "dark": 'black'
      },
    });

    // 当前主题状态变量
    const currentTheme = reactive({
      value: 'light'
    });

    // 切换主题的函数
    const toggleTheme = () => {
      currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
    };

    // 监听当前主题变化，重新应用样式
    watch(currentTheme, () => {
      // 执行主题切换后的操作，比如更新全局样式等
    });

    return {
      themeColor,
      currentTheme,
      toggleTheme,
    };
  },
};
</script>

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

<template>
  <div>
    <h1 :style="{ color: themeColor['text-color'][currentTheme] }">Hello, World!</h1>
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
import { reactive, watch } from 'vue';

export default {
  setup() {
    // 定义主题样式对象
    const themeColor = reactive({
      "text-color": {
        "light": 'white',
        "dark": 'black'
      },
    });

    // 当前主题状态变量
    const currentTheme = reactive({
      value: 'light'
    });

    // 监听当前主题变化，重新应用样式
    watch(currentTheme, () => {
      applyTheme();
    });

    // 切换主题的函数
    const toggleTheme = () => {
      currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light';
    };

    // 应用主题样式
    const applyTheme = () => {
      document.documentElement.style.setProperty('--text-color', themeColor['text-color'][currentTheme.value]);
    };

    // 初始化应用主题
    applyTheme();

    return {
      themeColor,
      currentTheme,
      toggleTheme,
    };
  },
};
</script>

<style>
  :root {
    --text-color: white;
  }

  h1 {
    color: var(--text-color);
  }
</style>