效果图：
changeColor.gif
此篇文章是基于 vue项目上进行修改的，在其他项目中也是可以实现这种效果的。
知识点：
1. :root 选择器
2. .setProperty属性
🎈首先创建一个 .scss 文件(其实用 .css 文件也是可以的)
image.png
index.scss 代码
// --color 相当于全局定义的一个css变量 // var(--color) 用于引用 // 在页面样式的引用中，你将会看到 :root { --color: rgb(79, 67, 253); --bck: rgb(196, 192, 255); } 并在 main.js中引入
import '@/assets/css/index.scss' ⚓⚓ （ 完整页面代码，直接往下翻 ~~~~~ ）
🎈引用全局配置的 css 变量
image.png
然后 document 获取到 :root，通过 .setProperty 直接修改定义的 css 变量属性的值，就能直接改变主题颜色
let root = document.querySelector(":root"); root.style.setProperty("--color", "rgb(253, 44, 79)"); root.style.setProperty("--bck", "rgb(255, 192, 203)"); 😡😡😡注意：
:root 只能在全局上使用，下面的这种写法是不生效的(因为设置 scoped 后就不是全局样式了)，想要生效的话可以去除 scoped
<style lang="scss" scoped> :root{ --sss:red; } .box{ background:var(--sss); } </style> 代码如下：
<template> <div class="box"> <div class="change_tab"> <span @click="changeColor(1)">主题色1</span> <span @click="changeColor(2)">主题色2</span> <span @click="changeColor(3)">主题色3</span> </div> <h3>文字颜色</h3> <div class="bck"></div> </div> </template> <script> export default { methods: { changeColor(num) { let root = document.querySelector(":root"); if (num == 1) { root.style.setProperty("--color", "rgb(253, 44, 79)"); root.style.setProperty("--bck", "rgb(255, 192, 203)"); } else if (num == 2) { root.style.setProperty("--color", "rgb(253, 114, 0)"); root.style.setProperty("--bck", "rgb(253, 216, 186)"); } else if (num == 3) { root.style.setProperty("--color", "rgb(79, 67, 253)"); root.style.setProperty("--bck", "rgb(196, 192, 255)"); } } } }; </script> <style lang="scss" scoped> .box { box-sizing: border-box; padding: 50px; .change_tab { display: flex; span { margin-right: 20px; color: #3d3d3d; text-decoration: underline; cursor: pointer; } } h3 { transition: 0.3s; color: var(--color); text-align: left; margin: 20px 0; } .bck { transition: 0.3s; width: 100px; height: 100px; background: var(--bck); } } </style> 上面讲的主要是应用于主题色的点击切换，如果想要在满足什么条件下，进入项目的时候直接改变颜色，那么就可以在 App.vue 里进行修改
(我这边是根据 sessionStorage 里面储存的 CHANNEL 类型判断的 )
mounted() { let root = document.querySelector(":root"); if (sessionStorage.CHANNEL == "AXXXXXXXXX") { root.style.setProperty("--color", "rgb(253, 44, 79)"); root.style.setProperty("--bck", "rgb(255, 192, 203)"); } else if (sessionStorage.CHANNEL == "ZMPH") { root.style.setProperty("--color", "rgb(253, 114, 0)"); root.style.setProperty("--bck", "rgb(253, 216, 186)"); } }