css变量实现换肤效果

1.新建换肤所用的js文件

import variablesWhite from './variables-white'
红色：
export default {
  ...variablesWhite,
  ['--header-bgcolor']: '#D74D45',
  ['--header-font-color']: 'red',
  ['--header-input-color']: '#EFB6B2',
  ['--header-input-bgcolor']: '#DD6861',
  ['--header-input-placeholder-color']: '#EFB6B2',
  ['--round-hover-bgcolor']: '#CA4841',
}
白色：

export default {

['--body-bgcolor']: '#fff',

['--light-bgcolor']: '#f5f5f5',

['--font-color']: '#4a4a4a',

['--font-color-shallow']: '#404040',

['--font-color-white']: '#333333',

['--font-color-grey']: '#5c5c5c',

['--font-color-grey2']: '#909090',

['--font-color-grey-shallow']: '#BEBEBE',

['--border']: '#f2f2f1',

['--scrollbar-color']: '#D0D0D0',

['--round-hover-bgcolor']: '#EBEBEB',

['--stripe-bg']: '#FAFAFA',

['--shallow-theme-bgcolor']: '#fdf6f5',

['--shallow-theme-bgcolor-hover']: '#FBEDEC',

//header

['--header-bgcolor']: '#F9F9F9',

['--header-font-color']: 'blue',

['--header-input-color']: '#4a4a4a',

['--header-input-bgcolor']: '#EDEDED',

['--header-input-placeholder-color']: '#BEBEBE',

// menu

['--menu-bgcolor']: '#ededed',

['--menu-item-hover-bg']: '#e7e7e7',

['--menu-item-active-bg']: '#e2e2e2',

//player

['--player-bgcolor']: '#F9F9F9',

//playlist

['--playlist-bgcolor']: '#fff',

['--playlist-hover-bgcolor']: '#EFEFEF',

//search

['--search-bgcolor']: '#fff',

//progress

['--progress-bgcolor']: '#F5F5F5',

//input

['--input-color']: '#4a4a4a',

['--input-bgcolor']: '#EDEDED',

//button

['--button-border-color']: '#D9D9D9',

['--button-hover-bgcolor']: '#F5F5F5',

//tab

['--tab-item-color']: '#7F7F81',

['--tab-item-hover-color']: '#343434',

['--tab-item-active-color']: '#000',

//modal

['--modal-bg-color']: '#F9F9F9',

// prompt

['--prompt-bg-color']: '#fff',

//song-detail

['--song-shallow-grey-bg']: '#E6E5E6',

}

 

 

使用：

<template>

<div class="theme">

<el-popover placement="top" v-model="visible" width="230">

<div class="themes">

<div

:key="index"

@click="changeTheme(themeKey)"

class="theme-item "

v-for="(themeValue, themeKey, index) in themeMap"

>

<div :style="themeValue.style" class="theme-icon"></div>

<p>{{themeValue.title}}</p>

 

</div>

</div>

 

</el-popover>

<p class="test">我是测试数据</p>

</div>

</template>

<script type="text/ecmascript-6">

import storage from "good-storage";

import variables from "../assets/themes/variables";

import variablesWhite from "../assets/themes/variables-white";

import variablesRed from "../assets/themes/variables-red";

const THEME_KEY = "__theme__";

const themes = {

white: "white",

dark: "dark",

red: "red"

};

export default {

created() {

this.themeMap = {

[themes.dark]: {

title: "深色",

file: variables,

style: {

backgroundColor: "#202020"

}

},

[themes.white]: {

title: "浅色",

file: variablesWhite,

style: {

backgroundColor: "blue",

border: "1px solid #EBEAEA"

}

},

[themes.red]: {

title: "红色",

file: variablesRed,

style: {

backgroundColor: "#D33A31"

}

}

};

// 默认浅色

this.changeTheme(storage.get(THEME_KEY, themes.red));

},

data() {

return {

visible: true

};

},

methods: {

changeTheme(themeKey) {

storage.set(THEME_KEY, themeKey);

const theme = this.themeMap[themeKey].file;

Object.keys(theme).forEach(key => {

const value = theme[key];

document.documentElement.style.setProperty(key, value);

});

}

},

components: {}

};

</script>

<style>

.theme-item {

flex-direction: column;

margin: 0 8px;

cursor: pointer;

}

.theme-icon {

width: 25px;

height: 25px;

border-radius: 50%;

margin-bottom: 4px;

}

.test{

background-color: var(--header-font-color)    ---》

}

</style>