vue-element换肤所有主题色和基础色均可实现自主配置
目录
- element换肤所有主题色和基础色均可自主配置
- 最终方案
- 以下是所有代码
- 总结
element换肤所有主题色和基础色均可自主配置
1.element-ui官方提供的动态切换主题方法换肤 但此方法只可修改$–color-primary 这一个主题色及其衍生色
2. 获取element-ui的theme-chalk/index.css文件，找到基础色所对应的颜色值，抽取颜色值进行替换，此种方法无法自动生成衍生色
{
'#67C23A': theme.color_success,
'#E6A23C': theme.color_warning,
'#F56C6C': theme.color_danger,
'#909399': theme.color_info,
}
3.自定义css变量，使用下面的方法去修改变量，此种方法仅可修改自定义的样式
document.documentElement.style.setProperty('--theme-color', value)
最终方案
以上三种相结合，实现我们的需求，各种主题色、基础色自主配置
以下是所有代码
Theme.vue
···ht-form-item是自定义组件 和 el-form-item 差不多
<template>
<div>
<h4 class="header">
<span>主题配色选择</span>
<el-button type="default" @click="resetTheme">重置</el-button>
</h4>
<el-row>
<el-col :span="8">
<ht-form-item label="主题颜色" label-width="140px">
<el-color-picker
v-model="theme"
:predefine="['#409eff', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="成功颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_success"
:predefine="['#67c23a', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="警告颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_warning"
:predefine="['#e6a23c', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="危险颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_danger"
:predefine="['#f56c6c', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="信息颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_info"
:predefine="['#909399', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="次要主题颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_secondary"
:predefine="['#dfebfc', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
</el-col>
<el-col :span="8">
<ht-form-item label="基础白色" label-width="140px">
<el-color-picker
v-model="themeColor.color_white"
:predefine="['#fff', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="基础黑色" label-width="140px">
<el-color-picker
v-model="themeColor.color_black"
:predefine="['#000', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="主要文字颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_text_primary"
:predefine="['#303133', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="常规文字颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_text_regular"
:predefine="['#606266', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="次要文字颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_text_secondary"
:predefine="['#909399', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="占位文字颜色" label-width="140px">
<el-color-picker
v-model="themeColor.color_text_placeholder"
:predefine="['#c0c4cc', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
</el-col>
<el-col :span="8">
<ht-form-item label="一级边框颜色" label-width="140px">
<el-color-picker
v-model="themeColor.border_color_base"
:predefine="['#dcdfe6', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="二级边框颜色" label-width="140px">
<el-color-picker
v-model="themeColor.border_color_light"
:predefine="['#e4e7ed', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="三级边框颜色" label-width="140px">
<el-color-picker
v-model="themeColor.border_color_lighter"
:predefine="['#ebeef5', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="四级边框颜色" label-width="140px">
<el-color-picker
v-model="themeColor.border_color_extra_light"
:predefine="['#f2f6fc', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="基础背景色" label-width="140px">
<el-color-picker
v-model="themeColor.background_color_base"
:predefine="['#f5f7fa', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
<ht-form-item label="第二基础背景色" label-width="140px">
<el-color-picker
v-model="themeColor.background_color_secondary"
:predefine="['#f0f2f5', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
class="theme-picker"
popper-class="theme-picker-dropdown"
/>
</ht-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<ht-form-item label="首页导航颜色" label-width="140px">
<span class="color-box">
<span class="color-block" :style="{backgroundColor:theme_color}"></span>
</span>
</ht-form-item>
</el-col>
<el-col :span="8">
<ht-form-item label="首页导航悬浮颜色" label-width="140px">
<span class="color-box">
<span class="color-block" :style="{backgroundColor:theme_color_active}"></span>
</span>
</ht-form-item>
</el-col>
</el-row>
</div>
</template>
<script>
import {mapState} from 'vuex';
import variables from '@/assets/css/theme-variables.scss'
const version = require('element-ui/package.json').version
const ORIGINAL_THEME = '#409EFF' // default color
export default {
data() {
return {
themeColor: {},
chalk: '', // content of theme-chalk css
theme: ORIGINAL_THEME,
theme_color: '#0d84ff',
theme_color_active: '#006bd9',
}
},
computed: {
...mapState({
themeVaribles: state => state.theme,
defaultTheme: state => state.theme.color_primary
})
},
watch: {
defaultTheme: {
handler: function(val, oldVal) {
this.theme = val
},
immediate: true
},
themeColor: {
handler: function (theme, oldTheme) {
// element默认主题配色值
this.setIndexStyle(this.getColorMap(theme))
this.setCssVariables(theme)
// vuex存储颜色
for(let x in theme) {
this.$store.dispatch('theme/changeSetting', {
key: x,
value: theme[x]
})
}
localStorage.setItem('themeColor',JSON.stringify(theme))
},
deep: true
},
theme(val,oldVal) {
if (typeof val !== 'string') return
const themeCluster = this.getThemeCluster(val.replace('#', ''))
const originalCluster = this.getThemeCluster(oldVal.replace('#', ''))
// console.log(themeCluster, originalCluster)
const getHandler = (variable, id) => {
return () => {
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
let newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
// 将其他配色添加进去
newStyle = this.getStyleTemplate(newStyle,this.getColorMap(this.themeColor));
let styleTag = document.getElementById(id)
styleTag.innerText = newStyle
}
}
const chalkHandler = getHandler('chalk', 'my-chalk')
chalkHandler()
const styles = [].slice.call(document.querySelectorAll('style'))
.filter(style => {
const text = style.innerText
return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
})
styles.forEach(style => {
const { innerText } = style
if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
})
//this.themeColor.color_primary = val
localStorage.setItem('color_primary',val)
this.$store.dispatch('theme/changeSetting', {
key: 'color_primary',
value: val
})
this.theme_color = this.generaterSimilarColor(val,0.1)
this.theme_color_active = this.generaterSimilarColor(val,0.2)
const node = document.documentElement
node.style.setProperty('--theme-color', this.theme_color)
node.style.setProperty('--theme-color-active', this.theme_color_active)
}
},
created() {
// 获取index.css
this.getFile(`//unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`)
.then(({ data }) => {
data = data.replace(/@font-face{[^}]+}/, '')
this.chalk = data
const style = document.createElement('style');
style.id = 'my-chalk'
style.innerText = this.chalk;
document.head.appendChild(style);
// 获取本地存储的基础色
if(localStorage.getItem('themeColor')) {
this.themeColor = JSON.parse(localStorage.getItem('themeColor'))
for(let x in this.themeColor) {
this.$store.dispatch('theme/changeSetting', {
key: x,
value: this.themeColor[x]
})
}
} else {
this.themeColor = Object.assign({},this.themeVaribles)
}
// 获取本地存储的主题色
if(localStorage.getItem("theme")) {
this.theme = localStorage.getItem("theme")
this.$store.dispatch('theme/changeSetting', {
key: 'color_primary',
value: this.theme
})
}
});
},
methods: {
// 重置主题
resetTheme() {
this.theme = ORIGINAL_THEME
let aVariables = {...variables}
delete aVariables.color_primary
this.themeColor = {...aVariables}
},
getColorMap(theme) {
return {
// '#409EFF': theme.color_primary,
'#67C23A': theme.color_success,
'#E6A23C': theme.color_warning,
'#F56C6C': theme.color_danger,
'#909399': theme.color_info,
'#dfebfc': theme.color_secondary,
'#ffffff': theme.color_white,
'#000000': theme.color_black,
'#303133': theme.color_text_primary,
'#606266': theme.color_text_regular,
'#909399': theme.color_text_secondary,
'#C0C4CC': theme.color_text_placeholder,
'#DCDFE6': theme.border_color_base,
'#E4E7ED': theme.border_color_light,
'#EBEEF5': theme.border_color_lighter,
'#F2F6FC': theme.border_color_extra_light,
'#F5F7FA': theme.background_color_base,
'#F0F2F5': theme.background_color_secondary
}
},
// css变量改变赋值
setCssVariables(theme) {
const node = document.documentElement
Object.entries(theme).forEach(ele => {
let key = ele[0].replace(/_/g, '-');
node.style.setProperty(`--${key}`, ele[1])
})
},
// 颜色替换后的样式文件
getStyleTemplate(data,colorMap) {
Object.keys(colorMap).forEach(key => {
const value = colorMap[key];
data = data.replace(new RegExp(key, 'ig'), value);
});
return data;
},
// 获取文件
getFile(url, isBlob = false) {
return new Promise((resolve, reject) => {
const client = new XMLHttpRequest();
client.responseType = isBlob ? 'blob' : '';
client.onreadystatechange = () => {
if (client.readyState !== 4) {
return;
}
if (client.status === 200) {
const urlArr = client.responseURL.split('/');
resolve({
data: client.response,
url: urlArr[urlArr.length - 1]
});
} else {
reject(new Error(client.statusText));
}
};
client.open('GET', url);
client.send();
});
},
// 修改颜色后替换index.css文件
setIndexStyle(colorMap) {
const myChalkStyle = document.getElementById("my-chalk")
const themeCluster = this.getThemeCluster(this.theme.replace('#', ''))
const originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace('#', ''))
let newStyle = this.updateStyle(this.chalk, originalCluster, themeCluster)
newStyle = this.getStyleTemplate(newStyle,colorMap)
myChalkStyle.innerText = newStyle;
},
updateStyle(style, oldCluster, newCluster) {
let newStyle = style
oldCluster.forEach((color, index) => {
newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
})
return newStyle
},
// 获取主题色和衍生色
getThemeCluster(theme) {
const tintColor = (color, tint) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
if (tint === 0) { // when primary color is in its rgb space
return [red, green, blue].join(',')
} else {
red += Math.round(tint * (255 - red))
green += Math.round(tint * (255 - green))
blue += Math.round(tint * (255 - blue))
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
}
const shadeColor = (color, shade) => {
let red = parseInt(color.slice(0, 2), 16)
let green = parseInt(color.slice(2, 4), 16)
let blue = parseInt(color.slice(4, 6), 16)
red = Math.round((1 - shade) * red)
green = Math.round((1 - shade) * green)
blue = Math.round((1 - shade) * blue)
red = red.toString(16)
green = green.toString(16)
blue = blue.toString(16)
return `#${red}${green}${blue}`
}
const clusters = [theme]
for (let i = 0; i <= 9; i++) {
clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
}
clusters.push(shadeColor(theme, 0.1))
return clusters
},
// 生成fvue相近主题色：这是一个十六进制转rgb,rgb再转hsl,hsl改变亮度，再转成rgb,再转成十六进制的方法。。。
generaterSimilarColor(color,weight) {
let colorChange = [];
for (let i=1; i<7; i+=2) {
colorChange.push(parseInt("0x"+color.slice(i, i+2)));
}
let [r,g,b] = colorChange
r /= 255, g /= 255, b /= 255;
let max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max == min){
h = s = 0; // achromatic
} else {
let d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
l = l-weight < 0 ? 0.1 : l-weight
if(s == 0) {
r = g = b = l; // achromatic
} else {
let hue2rgb = function hue2rgb(p, q, t) {
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
let q = l < 0.5 ? l * (1 + s) : l + s - l * s;
let p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
let rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
let strHex = "#";
for (let i=0; i<rgb.length; i++) {
let hex = Number(rgb[i]).toString(16);
if (hex.length < 2) {
hex = '0' + hex;
}
strHex += hex;
}
return strHex
}
},
mounted() {
// 获取index.css
this.getFile('/css/theme-chalk/index.css').then(({ data }) => {
data = data.replace(/@font-face{[^}]+}/, '')
this.chalk = data
const style = document.createElement('style')
style.id = 'my-chalk'
style.innerText = this.chalk
document.head.appendChild(style)
// 获取本地存储的基础色
if(localStorage.getItem('themeColor')) {
this.themeColor = JSON.parse(localStorage.getItem('themeColor'))
for(let x in this.themeColor) {
this.$store.dispatch('theme/changeSetting', {
key: x,
value: this.themeColor[x]
})
}
} else {
delete this.themeVaribles.color_primary
this.themeColor = Object.assign({},this.themeVaribles)
}
// 获取本地存储的主题色
if(localStorage.getItem("color_primary")) {
this.theme = localStorage.getItem("color_primary")
this.$store.dispatch('theme/changeSetting', {
key: 'color_primary',
value: this.theme
})
}
});
}
}
</script>
<style lang="scss" scoped>
.header {
font-size: 14px;
text-align: center;
font-weight: normal;
.el-button {
margin-left: 10px;
}
}
.color-box {
display: inline-block;
padding: 4px;
width: 32px;
height: 32px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid #e6e6e6;
.color-block {
display: inline-block;
width: 100%;
height: 100%;
border-radius: 2px;
}
}
</style>
Theme.js：vuex管理主题色
import themeVariables from '@/assets/css/theme-variables.scss'
const state = {
...themeVariables
}
const getters = {};
const mutations = {
CHANGE_SETTING: (state, { key, value }) => {
// eslint-disable-next-line no-prototype-builtins
if (state.hasOwnProperty(key)) {
state[key] = value
}
}
}
const actions = {
changeSetting({ commit }, data) {
commit('CHANGE_SETTING', data)
}
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
element-variables.scss
// 自定义主题色css变量
// 可使用js修改：document.documentElement.style.setProperty(name,value);
:root {
--color-primary: #409eff;/*主题颜色——#409EFF*/
--color-success: #67c23a;/*成功颜色——#67c23a*/
--color-warning: #e6a23c;/*警告颜色——#e6a23c*/
--color-danger: #f56c6c;/*危险颜色——#f56c6c*/
--color-info: #909399;/*信息颜色——#909399*/
--color-secondary: #dfebfc;/*次要主题颜色——#dfebfc*/
--color-white: #FFFFFF; /*基础白色——#FFFFFF*/
--color-black: #000;/*基础黑色——#000000*/
--color-text-primary: #303133; /*主要文字颜色——#303133*/
--color-text-regular: #606266; /*常规文字颜色——#606266*/
--color-text-secondary: #909399; /*次要文字颜色——#909399*/
--color-text-placeholder: #c0c4cc; /*占位文字颜色——#c0c4cc*/
--border-color-base: #dcdfe6; /*一级边框颜色——#dcdfe6*/
--border-color-light: #e4e7ed; /*二级边框颜色——#e4e7ed*/
--border-color-lighter: #ebeef5; /*三级边框颜色——#ebeef5*/
--border-color-extra-light: #f2f6fc; /*四级边框颜色——#f2f6fc*/
--background-color-base: #f5f7fa; /*基础背景色——#F5F7FA*/
--background-color-secondary: #f0f2f5; /*第二基础背景色——#F0F2F5*/
--theme-color: #2761ff; /*主题颜色（即首页导航栏颜色）——#2761ff*/
--theme-color-active: #1f4ecc; /*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/
}
$--color-primary: var(--color-primary);/*主题颜色——#409EFF*/
$--color-success: var(--color-success);/*成功颜色——#67c23a*/
$--color-warning: var(--color-warning);/*警告颜色——#e6a23c*/
$--color-danger: var(--color-danger);/*危险颜色——#f56c6c*/
$--color-info: var(--color-info);/*信息颜色——#909399*/
$--color-secondary: var(--color-secondary);/*次要主题颜色——#dfebfc*/
$--color-white: var(--color-white);/*基础白色——#FFFFFF*/
$--color-black: var(--color-black);/*基础黑色——#000000*/
$--color-text-primary: var(--color-text-primary); /*主要文字颜色——#303133*/
$--color-text-regular: var(--color-text-regular); /*常规文字颜色——#606266*/
$--color-text-secondary: var(--color-text-secondary); /*次要文字颜色——#909399*/
$--color-text-placeholder: var(--color-text-placeholder); /*占位文字颜色——#c0c4cc*/
$--border-color-base: var(--border-color-base); /*一级边框颜色——#dcdfe6*/
$--border-color-light: var(--border-color-light); /*二级边框颜色——#e4e7ed*/
$--border-color-lighter: var(--border-color-lighter); /*三级边框颜色——#ebeef5*/
$--border-color-extra-light: var(--border-color-extra-light); /*四级边框颜色——#f2f6fc*/
$--background-color-base: var(--background-color-base); /*基础背景色——#F5F7FA*/
$--background-color-secondary: var(--background-color-secondary); /*第二基础背景色——#F0F2F5*/
$--theme-color: var(--theme-color); /*主题颜色（即首页导航栏颜色）——#2761ff*/
$--theme-color-active: var(--theme-color-active); /*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/
element-custom.scss
@import "theme-variables.scss";
/* 改变 icon 字体路径变量，必需 */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";
@import "../icon/iconfont.css";
.el-tree-node__label{font-size:12px}
theme-variables.scss
/* 改变系统主题色变量 ——*/
$--theme-color: #2761ff; /*主题颜色（即首页导航栏颜色）——#2761ff*/
$--theme-color-active: #1f4ecc; /*首页导航栏颜色鼠标悬停到某一个菜单时的颜色——#1F4ECC*/
/* 改变element组件主题色变量 ——*/
$--color-primary: #409eff; /*主题颜色——#409EFF*/
$--color-success: #67c23a; /*成功颜色——#67c23a*/
$--color-warning: #e6a23c; /*警告颜色——#e6a23c*/
$--color-danger: #f56c6c; /*危险颜色——#f56c6c*/
$--color-info: #909399; /*信息颜色——#909399*/
$--color-secondary: #dfebfc;/*次要主题颜色——#409EFF*/
$--color-white: #ffffff; /*基础白色——#FFFFFF*/
$--color-black: #000000; /*基础黑色——#000000*/
$--color-text-primary: #303133; /*主要文字颜色——#303133*/
$--color-text-regular: #606266; /*常规文字颜色——#606266*/
$--color-text-secondary: #909399; /*次要文字颜色——#909399*/
$--color-text-placeholder: #c0c4cc; /*占位文字颜色——#c0c4cc*/
$--border-color-base: #dcdfe6; /*一级边框颜色——#dcdfe6*/
$--border-color-light: #e4e7ed; /*二级边框颜色——#e4e7ed*/
$--border-color-lighter: #ebeef5; /*三级边框颜色——#ebeef5*/
$--border-color-extra-light: #f2f6fc; /*四级边框颜色——#f2f6fc*/
$--background-color-base: #f5f7fa; /*基础背景色——#F5F7FA*/
$--background-color-secondary: #f0f2f5; /*第二基础背景色——#F0F2F5*/
/* 左侧树宽度设置 */
$--aside-width: 230px;
/* 自定义主题色变量 */
.primaryColor {
background-color: $--color-primary;
}
//主要的一步：
:export {
theme_color: $--theme-color;
theme_color_active: $--theme-color-active;
color_primary: $--color-primary;
color_success: $--color-success;
color_warning: $--color-warning;
color_danger: $--color-danger;
color_info: $--color-info;
color_secondary: $--color-secondary;
color_white: $--color-white;
color_black: $--color-black;
color_text_primary: $--color-text-primary;
color_text_regular: $--color-text-regular;
color_text_secondary: $--color-text-secondary;
color_text_placeholder: $--color-text-placeholder;
border_color_base: $--border-color-base;
border_color_light: $--border-color-light;
border_color_lighter: $--border-color-lighter;
border_color_extra_light: $--border-color-extra-light;
background_color_base: $--background-color-base;
background_color_secondary: $--background-color-secondary;
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
赞 (0)
相关推荐
-
Vue+ElementUI实现动态更换任意主题色(动态换肤)的全过程
目录 前言 vue-element-admin 官方实现的方式 参考文档: webpack-theme-color-replacer 插件的实现方式 总结 前言 最近基于 ElementUI 的项目上需要实现动态换肤的功能,这里提供两种方式: vue-element-admin 官方实现的方式 webpack-theme-color-replacer 插件的实现方式 vue-element-admin 官方实现的方式 简单说明一下它的原理: element-ui 2.0 版本之后所有的样式都是基
-
elementPlus修改主题色以及皮肤设置思路
目录 elementPlus修改主题色以及皮肤设置 修改主题色 系统皮肤 elementPlus修改主题颜色(含暗夜模式切换) 总结 elementPlus修改主题色以及皮肤设置 修改主题色 <el-color-picker style="margin-top:20px" v-model="systeamColor" @change="colorChange" /> 采用element颜色选择的组件 // 变量前缀 colorChan
-
vue实现换肤功能
公司项目要实现vue项目换肤功能,要求,考虑到最节省时间的就是写两套css,一套light.css,一套dark.css,然后切换css 一.实现思路 切换选中的皮肤状态(light,或者dark)存储在sessionStorage中,监听sessionStorage数据变化,切换index.html中引入的css文件 二.实现过程 1.在main.vue添加: <p style="display: inline-block;"> 切换主题:</p> &l
-
基于vue的换肤功能的示例代码
最近在做的一个几月vue的移动端小demo,其中有一块是实现各个页面的统一换肤功能的.想着写一篇文章,来写一写实现过程中遇到的一些问题. 项目github地址 项目github地址 一 先看一下实现效果吧 设置主题颜色 讲道理这么一个功能,我觉得这么几点可以说下,分步实现: 1. 色值的选取 2. scss 的一些小众用法(多变量CSS值的批量设置) 3. 全局事件巴士的应用 1 色值的选取和原则 推荐大家看下蚂蚁金服的设计指引,里面对常见的交互和界面设计有一套不错的指引和建议,喜欢看书的也可以
-
Vue + Scss 动态切换主题颜色实现换肤的示例代码
根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t
-
Vue 换肤的示例实践
最近公司做的项目得到一个网站换肤的需求,也就是切换主题.那么如何切换主题色呢?切换主题色其实就是切换 CSS,然而在项目中不仅只有 CSS 需要换肤,图标和图片也需要跟随主题进行切换.于是,写一篇文章来记录下 Vue 中实现换肤的过程,先看下效果吧. 本文主要分三部分:CSS 切换,图标切换和图片切换. CSS切换 关于 CSS 颜色的切换,我通过搜索,参考了ElementUI的方案,总的来说分为四步 在 static 目录下新建一个 theme.css 文件,将需要替换的 CSS 声明在此文件
-
Vue项目实现换肤功能的一种方案分析
需求:网站换肤,主题切换.网站的主题色可以在几种常用颜色之间进行切换,还有相关图片.图标也要跟随主题进行切换. 不多说,先看下最终的实现效果: 文章由两部分组成:css切换,图片图标切换 css切换 1.在 static 目录下新建一个 styles 文件夹,在 styles 下新建一个 theme.scss 文件(项目使用了sass,会自动编译成css文件,如果没有使用这些预处理工具可以直接新建 theme.css),将需要替换的 CSS 声明在此文件中. .theme-test-btn {
-
详解Vue 换肤方案验证
本文的换肤方案灵感来自于 element-ui 需求:网站换肤,主题切换.网站的主题色可以在几种常用颜色之间进行切换,还有相关图片.图标也要跟随主题进行切换. 不多说,先看下最终的实现效果: 文章由两部分组成:css切换,图片图标切换 css切换 1.在 static 目录下新建一个 styles 文件夹,在 styles 下新建一个 theme.scss 文件(项目使用了sass,会自动编译成css文件,如果没有使用这些预处理工具可以直接新建 theme.css),将需要替换的 CSS 声明在
-
使用vue + less 实现简单换肤功能的示例
做的换肤效果比较简单,只是顶部导航背景色的改变.下面是效果图. 首先,先说一下我最初的思路. 我最初的想法是使用less定义变量,然后通过js来切换变量,通过切换的变量来达到换肤的效果. 我先新建了一个 theme.less文件,代码如下: @theme:@themea; @themea:pink; @themeb:blue; @themec:gray; 如我最开始的想法,应该是通过点击事件来改变变量 @theme 的值. 我用了element-ui这个框架,所以我的下拉菜单的代码也不复杂: <
-
android使用SkinManager实现换肤功能的示例
试着用鸿洋大神写的SkinManager实现了换肤功能. 一.配置 在app下build.gradle中添加依赖: //换肤功能 compile 'com.zhy:changeskin:4.0.2' 这样就配置好了,然后在程序入口进行初始化. 二.全局初始化 在自己创建的继承application的类中添加: //换肤sdk初始化 SkinManager.getInstance().init(this); 这个类肯定要在清单文件<application/>节点配置的. 接下来还需要注册. 三.
-
vue+element实现动态换肤的示例代码
有时候一个项目的主题并不能满足所有人的审美,这时候换肤功能就很友好,本项目基于vue+element实现后台管理项目的换肤功能 1.创建换肤组件 <template> <el-color-picker class="theme-picker" popper-class="theme-picker-dropdown" v-model="theme" :predefine="predefineColors" &g
-
基于Vue结合ElementUI的换肤解决方案
目录 写在前面 方案一.使用全局的样式覆盖(前端通用) 方案二.自定义自己的Element-ui配色 方案三.快速改变网站颜色 方案四.实时更换主色调 写在前面 换肤这个功能,不能算是很常见,但是也是有需求的,所以这里提供几种前端的换肤解决方案,供大家参考. 本文将介绍几种基于Vue.Element-UI的换肤实现方案,力争通俗易懂,易上手,希望大家喜欢~ 方案一.使用全局的样式覆盖(前端通用) 这个应该是最常见,也是大家最容易想到的,也是最容易实现的一种方案. 我们单独写一份样式表(css 文