让你方便快捷实现主题色切换（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 变量的值，从而实现主题切换或其他动态样式变化。