Vue修改css变量可以通过VueUse的useCssVar来实现

Vue修改 css变量可以通过VueUse的useCssVar来实现,我们可以使用useCssVar来实现修改局部css变量和全局css变量，你可以修改局部变量也可以修改全局变量。

代码示例

<template>
  <div>
     <!-- 这里使用了css变量 -->
    <div ref="el"  style="color: var(--color1)">
      局部修改, {{ color1 }}
    </div>
    <div   style="color: var(--color2)">
      全局修改, {{ color2 }}
    </div>
    <button @click="switchColor1">Change Color</button>
    <button @click="switchColor2">Change Color</button>
  </div>
</template>
<script setup lang="ts">
/*
 vueuse 中文文档
 https://www.itxst.com/vueuse/tutorial.html
*/
import { ref } from "vue";
import { useCssVar } from "@vueuse/core";
//获取Html DOM元素
const el = ref(null);
//可以指定修改那个元素区域的变量
const color1 = useCssVar("--color1", el);
//也可以全局修改
const color2 = useCssVar("--color2");

//设置css变量的值
const switchColor1=()=> {
  if (color1.value === "#df8543") color1.value = "#7fa998";
  else color1.value = "#df8543";
}
const switchColor2=()=>{
  if (color2.value === "#df8543") color2.value = "#7fa998";
  else color2.value = "#df8543";
}
</script>
<style>
// 定义CSS变量
:root{
  --color1:red;
  --color2:red;
}
.docker {
  padding: 20px;
  background-color: #eeee;
}
</style>

在线例子

例子