让你方便快捷实现主题色切换（useCssVar）

---

前言

使用 CSS 变量（CSS Custom Properties）实现主题色切换是一种高效且易于维护的方法。通过将主题颜色定义为 CSS 变量，你可以轻松地在不同主题之间切换，而无需修改多个 CSS 规则。

一、useCssVar是什么？

useCssVar 并不是一个原生的 JavaScript 或 CSS API 名称，但可以通过结合 JavaScript 和 CSS 自定义属性（CSS Variables）来实现类似的功能，以动态地更新 CSS 变量的值。

二、使用步骤

1.安装依赖

代码如下（示例）：

pnpm add @vueuse/core -D

2.实现主题色切换

代码如下（示例）：

<script setup lang="ts">
import { useCssVar } from '@vueuse/core'
const changeTheme = (theme: string) => {console.log(theme)const cssVar = useCssVar('--header-bg-1')cssVar.value = theme
}
</script>
<template><div class="container"><div class="bg">123</div><div><button @click="changeTheme('red')">红色</button><button @click="changeTheme('yellow')">黄色</button><button @click="changeTheme('pink')">粉色</button></div></div>
</template><style lang="less">
:root {--header-bg-1: #ccc;
}.container .bg {width: 100vw;height: 600px;color: white;text-align: center;line-height: 50px;background: var(--header-bg-1);
}

总结

通过这种方式，你可以动态地更新 CSS 变量的值，从而实现主题切换或其他动态样式变化。