在src文件下创建style文件夹index.css文件定义颜色

:root {--book-bgcolor: #125465;
}

在main.ts文件导入全局css样式

import './style/index.css'

在目标页面使用颜色

<template><div class="bg"><button @click="changecolor">变色</button></div>
</template>
<style scoped>
.bg {width: 100vw;height: 100vh;background-color: var(--book-bgcolor);
}
</style>

使用setProperty动态更改css样式

<script setup>
const changecolor = () => {const dom = document.documentElementdom.style.setProperty('--book-bgcolor', '#abcd10')console.log(dom)
}
</script>

模拟

<template><div class="bg"><div v-for="item in color" v-bind:key="item.color">