vue 动态改变主题颜色

实现效果

 一。应用方法

 1.css3伪类选择器   

2.CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值 。

   语法   style.setProperty(propertyName, value, priority);

    参数

• propertyName 是一个 DOMString ，代表被更改的 CSS 属性。
• value可选 是一个 DOMString ，含有新的属性值。如果没有指定，则当作空字符串。
  • 注意: value 不能包含 "!important" --那个应该使用 priority 参数。
• priority可选 是一个 DOMString 允许设置 "important" CSS 优先级。如果没有指定，则当作空字符串

 二。定义主题颜色（黑、白）

        创建一个theme.json文件，定义变量名称以及对应颜色（字体、背景、边框颜色等）

{
    "white":{
        "--maintextcolor": "#222222",
        "--mainbgcolor": "#ffffff",
        "--mainbordercolor":"1px solid #CDD6F0",
        "--otherbgcolor":"#CDD6F0",
        "--hovercolor":"#F5F7FA",
        "--webkitbgcolor":"#EFEFEF",
        "--webkitbtncolor":"#BFBFBF",
        "--disablecolor":"#e3e3e3",
        "--disabletextcolor":"#7c7575",
        "--paginationcolor":"rgba(48,93,190,0.10)",
        "--paginationbordercolor":"1px solid #305DBE",
        "--buttonbgcolor":"rgba(48,93,190,0.16)",
        "--buttoncolor":"#305DBE",
        "--buttonbordercolor":"1px solid rgba(48,93,190,0.7)",
        "--buttonborderredcolor":"1px solid rgba(222,80,68,0.7)",
        "--buttonredcolor":"#DE5044",
        "--buttonbgredcolor":"rgba(222,80,68,0.16)"
    },
    "black":{
        "--maintextcolor": "#ffffff",
        "--mainbgcolor": "#28282B",
        "--mainbordercolor":"1px solid rgb(255,255,255,0.25)",
        "--otherbgcolor":"#3E4D6C",
        "--hovercolor":"#193b6a",
        "--webkitbgcolor":"#222",
        "--webkitbtncolor":"#666",
        "--disablecolor":"#7c7575",
        "--disabletextcolor":"#e3e3e3",
        "--paginationcolor":"#449DFF",
        "--paginationbordercolor":"none",
        "--buttonbgcolor":"rgba(48,93,190,0.16)",
        "--buttonbordercolor":"1px solid rgba(68,157,255,0.35)",
        "--buttonborderredcolor":"1px solid rgba(222,80,68,0.35);",
        "--buttoncolor":"#449DFF",
        "--buttonredcolor":"#DE5044"
    }
}

三。将样式通过切换按钮动态添加到html上

    创建 addcolor.js文件

// 主题样式
import themes from './theme.json'


export function addColor (init){
    const theme = localStorage.theme
    const {white,black,obj={}} = themes
  
    // 1.localStorage.theme 不存在默认黑色 2.存在并且刷新页面不改变主题 3.存在并且点切换才改变主题
    if(!theme){
        localStorage.setItem('theme','black')
        Object.assign(obj,black)
    }else {
        if(init)
            Object.assign(obj,theme == 'black'? black : white)
        else{
            localStorage.setItem('theme',theme == 'black'?' white' : 'black')
            Object.assign(obj,theme == 'black'? white : black)
        }
    }
    // html 添加主题样式
    for (const key in obj) {
        document.documentElement.style.setProperty(key, obj[key]);
    }
}

在页面上使用addcolor方法

<el-button @click="addColor(false)" class="btn">换肤</el-button>


<script>
import { addColor } from '../utils/style/addcolor';
export default {
  name: 'Layout',
  methods: {
    addColor(){
      console.log('换肤');
      addColor()
    }
  }
}
</script>

四。第一次加载页面或者刷新加载页面要调用一次addColor方法，在main.js引入进行调用

import Vue from 'vue'
import echarts from 'echarts'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import multiCascader from '@/components/multiCascader/index'
import elTableInfiniteScroll from 'el-table-infinite-scroll'
import '@/styles/index.scss' // global css
import '@/styles/standingBook.scss' // standingBook css

import App from './App'
import store from './store'
import router from './router'


// 中文版 element-ui
Vue.use(ElementUI)
Vue.use(multiCascader) // 级联选择器
Vue.config.productionTip = false
Vue.use(elTableInfiniteScroll)


import { addColor } from './utils/style/addcolor';
addColor(true)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

五。在项目中应用css（ 在style样式中通过var()进行使用 ）

.shrink {
    margin-left: 32px;
    /deep/ .el-transfer-panel {
      width: 244px;
      height: 338px;
      //应用设置好的主题css样式
      background-color: var(--mainbgcolor);
      border: var(--mainbordercolor);
      .el-transfer-panel__header {
        background-color: var(--mainbgcolor);
        border: var(--mainbordercolor);
        .el-checkbox {
          .el-checkbox__label {
            font-size: 14px;
            color: var(--maintextcolor);
            font-weight: 600;
            span {
              color: var(--maintextcolor);
            }
          }
        }
      }
    }
    // 穿梭框中心内容样式
    /deep/ .el-transfer-panel__body {
      .el-transfer-panel__filter {
        input {
          background-color: var(--mainbgcolor);
          border: var(--mainbordercolor);
          width: 196px;
          height: 32px;
          border-radius: 0;
          border-radius: 4px;
        }
      }
      .el-checkbox-group {
        span {
          color: var(--maintextcolor);
        }
      }
      .el-checkbox-group::-webkit-scrollbar {
        width: 0px;
      }
    }
    // 穿梭框的中间按钮样式
    >>> .el-transfer__buttons {
      .el-button {
        border-radius: 4px;
        border: var(--mainbordercolor);
        background: var(--mainbgcolor);
        color: var(--maintextcolor);
      }
      .el-button--primary.is-disabled {
        border-radius: 4px;
        border: var(--mainbordercolor);
        background: var(--mainbgcolor);
        color: var(--maintextcolor);
      }
    }
  }
  /deep/ .el-dialog {
    width: 750px;
    height: 545px;
    .dialog-footer {
      text-align: center;
    }
  }
  .el-button{
    background: var(--buttonbgcolor);
    padding: 6px 8px;
    color: var(--buttoncolor);
    border: var(--buttonbordercolor);
  }

参考博客：https://blog.csdn.net/qq_42570449/article/details/121689015?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-11-121689015-null-null.pc_agg_new_rank&utm_term=vue+%E6%9B%B4%E6%8D%A2%E6%8C%89%E9%92%AE%E7%9A%84%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE&spm=1000.2123.3001.4430https://blog.csdn.net/qq_42570449/article/details/121689015?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-11-121689015-null-null.pc_agg_new_rank&utm_term=vue+%E6%9B%B4%E6%8D%A2%E6%8C%89%E9%92%AE%E7%9A%84%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE&spm=1000.2123.3001.4430