直接放代码，很简单

<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { computed, onMounted, watch } from 'vue';
import { ElNotification } from 'element-plus';
import { useUserStore } from '@/store/index';
const userStore = useUserStore();
const color = computed(() => userStore.baseForm.color);// 监听浏览器版本
// @ts-ignore
import getBsInfo from 'browser-tag';
const bsInfo = getBsInfo(); //  { bs_name: "chrome浏览器", bs_tag: "chrome", bs_version: "108.0.0.0" },
console.log(bsInfo);
if (bsInfo.bs_tag === 'firefox' && bsInfo.bs_version.split(',')[0] < 100) {ElNotification({title: '警告',message: '当前浏览器版本过低，部分功能不可用，请更新火狐浏览器版本（不低于100.x版本）',type: 'warning',duration: 0,});
}onMounted(() => {// 初始化主题色setColor(color.value);
});// 更新主题色
watch(() => color.value,(newValue, oldValue) => {setColor(newValue);},
);const setColor = (color: string) => {// document.documentElement 是全局变量时const el = document.documentElement;// const el = document.getElementById('xxx')// 获取 css 变量getComputedStyle(el).getPropertyValue(`--el-color-primary`);// 主题色系// --el-color-primary: #f0905a;// --el-color-primary-light-3: #f2a67a;// --el-color-primary-light-5: #f4b88c;// --el-color-primary-light-7: #f6c99e;// --el-color-primary-light-8: #f7d3ab;// --el-color-primary-light-9: #f8ddba;// --el-color-primary-dark-2: #e88e4e;// 主题色系算法const getColorMap = (color: string) => {const colorMap = {'--el-color-primary': color,'--el-color-primary-light-3': color.replace(/#/, '#').replace(/(\w{2})/g, (a) => {return (parseInt(a, 16) + 30).toString(16);}),'--el-color-primary-light-5': color.replace(/#/, '#').replace(/(\w{2})/g, (a) => {return (parseInt(a, 16) + 50).toString(16);}),'--el-color-primary-light-7': color.replace(/#/, '#').replace(/(\w{2})/g, (a) => {return (parseInt(a, 16) + 70).toString(16);}),'--el-color-primary-light-8': color.replace(/#/, '#').replace(/(\w{2})/g, (a) => {return (parseInt(a, 16) + 80).toString(16);}),'--el-color-primary-light-9': color.replace(/#/, '#').replace(/(\w{2})/g, (a) => {return (parseInt(a, 16) + 90).toString(16);}),'--el-color-primary-dark-2': color.replace(/#/, '#').replace(/(\w{2})/g, (a) => {return (parseInt(a, 16) - 30).toString(16);}),};return colorMap;};// 设置 css 变量const colorMap: any = getColorMap(color);for (const key in colorMap) {el.style.setProperty(key, colorMap[key]);}
};
</script><template><el-config-provider :locale="zhCn"><router-view /></el-config-provider>
</template><style scoped></style>