admin 管理员组

文章数量: 1087818

【vue3】：主题色解决方案

# 主题色修改

# 原理

修改主题色关键点是 色值不能写死。

在该解决方案中，主要涉及的是 element-plus 以及 非 element-plus 的主题色修改。

对于非 element-plus 解决方法如下：

1、全局定义scss变量，页面绑定该变量，通过修改该变量值，从而使页面主题色进行修改。

2、并且该变量要实现响应式，永久保存（避免页面刷新色值被覆盖）。因此需要结合本地缓存以及vuex将值保存好。

3、初始时通过 getters 获取主题色的同时，使用 generateColors 函数生成新的色值表，与 scss色值表 进行匹配替换。

对于 element-plus 解决方案如下：

1、获取当前 element-plus 的所有样式。

2、找到要替换的样式（关键）。

3、把替换后的样式利用style的优先级高于外部引入样式的方式加载样式表。


# 非 element-plus

第一步：定义scss变量文件，结合vuex将其保存到本地缓存中。

// variables.scss
$menuBg: #304156;
:export {menuBg: $menuBg;
}

// module/theme.js
import variable from '@/styles/variables.scss'
export default {namespaced: true,state: () => ({//  (非 element-plus)variable: variable,// （element-plus）mainColor: getItem("mainColor") || '#304156',  }),setMainColor (state, newColor) {//  (非 element-plus)state.variable.menuBg = newColor// （element-plus）state.mainColor = newColor// 保存到缓存中setItem('mainColor', newColor)}  
}

注：第 8 行 以及 第 15 行代码在修改 非 element-plus 主题色中没有任何作用，设置在这里目的在于避免后面讲修改 element-plus 在来设置显的很突兀。

// index.js
import { createStore } from 'vuex'
import theme from './modules/theme.js'
import getters from './getters'
export default createStore({getters,modules: {theme}
})

getItem 和 setItem分别为通过 key 获取和保存在本地缓存的数据，需自行封装。

第二步：修改主题色

使用element-plus 中的取色器

这一步操作放在最后（小节-最后补充），结合 element-plus 修改主题色在一起写。

第三步：页面初次打开，以及再次打开时，生成新的色值表，并渲染缓存中的颜色。

// getters.js
const getters = {cssVar: state => ({...state.theme.variable,...generateColors(getItem('mainColor'))})// （element-plus）mainColor: state => state.theme.mainColor
}

解释：

（1）这里是根据缓存中的主题色，生成新的色值表（generateColors），在跟scss变量文件进行比较替换。

（2）generateColors 具体是如何生成新的色值，请看 element-plus修改主题色的方案 中具体会涉及到，这里简单一笔带过。

（3）同样 第 8 行代码在这里也没有太大作用。


类似于最终要呈现出来的效果为：

cssVar: state => ({menuBg: '#304156',menuBg: 'red',
})

最终通过替换，

本文标签： vue3主题色解决方案

版权声明：本文标题：【vue3】：主题色解决方案 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700275829a375742.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。