文章介绍了如何使用CSS变量和Vue.js来实现一个多主题切换的功能。首先，在CSS文件中定义了根元素的样式变量，包括背景色、文本色和主题色，并为不同的主题（亮色、暗色、蓝色）设置了不同的颜色值。接着，通过Vue组件中的按钮点击事件来切换主题，使用`document.documentElement.setAttribute`来改变根元素的`data-theme`属性，从而应用不同的主题样式。同时，使用`localStorage`来持久化用户的主题选择。最后，通过CSS变量应用到组件的样式中，实现主题的动态切换。 评价：文章提供了一个实用的多主题切换实现方案，通过CSS变量和Vue.js的结合，使得主题切换变得简单而高效。代码示例清晰，易于理解和应用，对于需要实现主题切换功能的开发者来说是一个不错的参考。
结果由AI生成
利用 :root { --color-primary: ... } 定义主题变量
在切换时修改 document.documentElement.style.setProperty()
定义主题变量
/* theme.css */
:root {
--color-bg: #ffffff;
--color-text: #000000;
--color-primary: #42b883;
}
html[data-theme='dark'] {
--color-bg: #121212;
--color-text: #ffffff;
--color-primary: #ff9800;
}
html[data-theme='blue'] {
--color-bg: #e3f2fd;
--color-text: #0d47a1;
--color-primary: #2196f3;
}
组件中切换主题
<template>
<div class="app">
<h1>多主题切换示例</h1>
<button @click="setTheme('light')">亮色模式</button>
<button @click="setTheme('dark')">暗色模式</button>
<button @click="setTheme('blue')">蓝色主题</button>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue"
const theme = ref(localStorage.getItem("theme") || "light")
const setTheme = (t) => {
theme.value = t
document.documentElement.setAttribute("data-theme", t)
localStorage.setItem("theme", t)
}
onMounted(() => {
document.documentElement.setAttribute("data-theme", theme.value)
})
</script>
<style>
.app {
background-color: var(--color-bg);
color: var(--color-text);
}
button {
background: var(--color-primary);
color: var(--color-text);
margin: 5px;
padding: 8px 12px;
border: none;
border-radius: 6px;
}
</style>
优先考虑 OIDC（更轻量、面向现代 Web）
遭不住了遭不住了
？？？
可以了吗
hhh
كل شخص على الفور القرصات الخاصة بهم حبة سحرية 200 مرة