效果圖：
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)"); } }