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>