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 {
     25px;
    height: 25px;
    border-radius: 50%;
    margin-bottom: 4px;
}
.test{
  background-color: var(--header-font-color)   ---》
}
</style>