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>
