步骤1：

定义全局变量并且引入

步骤2

在app.vue中使用

步骤3

在其他组件中更改样式--这只是代码段

<template>
  <div class="home">
    <div class="select-wrap">
      切换主题
      <el-select v-model="subject" class="m-2" placeholder="Select" size="large" @change="change">
        <el-option
          v-for="item in optionsList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import {changeRootVara} from '../assets/coverElement.js'
import { setup, reactive, ref, watchEffect } from 'vue'
export default {
  name: 'HomeView',
  setup() {

    let subject = ref('#f1f1cc')
    // 主题下拉框
    let optionsList = reactive([{
      label: '黄色',
      value: '#f1f1cc'
    },
    {
      label: '绿色',
      value: '#d1edc4'
    }, {
      label: '粉色',
      value: '#fde2e2'
    }])

    // 下拉框change事件
    let change = ()=>{
      console.log(subject.value)
    }
    
    // 放延迟接口 获取 主题颜色  从后端获取
    setTimeout(()=>{
      subject.value = '#fde2e2'
    }, 600)


    watchEffect((newVal, oldVal)=>{
      document.getElementsByTagName('body')[0].style.setProperty('--sColor', subject.value); // 变量挂在到body上
    })
    return {
      change,
      optionsList,
      subject
    }
  }
}
</script>
<style lang="scss" scope>
.select-wrap{
  margin-bottom: 10px;
}

.changeSubject{
  margin-bottom: 20px;
}
</style>

---------------------问题完成---------------------------

补充：全局变量不支持 IE 更改element-plus主题颜色，就直接更改element-plus相应的变量就好。