vue之动态修改主题颜色

我这里没有使用任何ui，就通过自定义的主题色去修改样式

主要使用方法

1、css3伪类选择器:root

2、setProperty方法去设置style

第一步，定义主题色

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

{
    "white":{
        "--maintextcolor": "#000000",
        "--mainbgcolor": "#ffffff",
        "--mainbordercolor":"1px solid red",
        "--otherbgcolor":"#eaedf1"
    },
    "black":{
        "--maintextcolor": "#ffffff",
        "--mainbgcolor": "#16161a",
        "--mainbordercolor":"1px solid blue",
        "--otherbgcolor":"#25252b"
    }
}

我这里就定义了white、black两套样式，也可以进行扩展定义多套样式。

第二步，将样式通过切换按钮动态添加到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]);
    }
}

引入写好的主题样式theme.json文件，这里通过localStorage将主题色的设置简单存到了浏览器本地，也可以使用vux或者通过请求来保存主题色的设置。

首先第一次加载页面时，本地存储是没有theme，所以默认进来就设置为black主题，并本地存储theme为black，代表当前主题为black

当点击切换主题的时候就根据当前本地存储的关键字去切换另外一套，这里要注意的是点击刷新的时候就不应该改变主题色。

第三步，在style样式中通过var()进行使用

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

import { addColor } from '../hooks/addColor';
addColor(true)

在vue当中的使用

<template>

 <div class="main">我是文字</div>
 <span  @click="addColor(false)" class="btn">切换主题</span>
  
</template>

<script>
import { addColor } from '../hooks/addColor';
export default {
    name: 'Index',

    setup(){
        return {
            addColor
        }
    }
};
</script>

<style lang="scss" scoped>
.main{
    width: 200px;
    height: 200px;
    color: var(--maincolor);
    background: var(--mainbgcolor);
    border: var(--mainbordercolor);
    margin: auto;
}
.btn {
    display: block;
    width: 120px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 20px auto;
    color: var(--maincolor);
    background: var(--mainbgcolor);
    border: var(--mainbordercolor);
}

</style>

效果图：