基于elementui的主题色改变和全网站色彩切换

主题色切换

什么是主题色切换，所谓的主题色切换就是我们通过自定义的方式去修改elementUI原有的主题色，以达到我们业务所要使用的多（单）色彩切换.

静态切换

elementui 采用的是scss进行实现的样式我们的项目也使用的是scss 因此我们在项目中创建一个element-variables.scss文件存放我们修改的主题色

/* 改变主题色变量 */
$--color-primary: 自定义的主题色;/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';@import "~element-ui/packages/theme-chalk/src/index";

在项目的入口文件中引用定义的文件

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)

如果项目中没有使用scss的话则参考elementui官网进行配置
element-ui

动态切换

动态切换则是我们通过element-ui的颜色选择器，和获取远端element-ui主题样式，通过标签匹配替换的方式进行改变的。
封装的组件

<template><el-color-picker v-model="theme" />
</template>
<script>const version = require("element-ui/package.json").version;const ORIGINAL_THEME = "#409EFF";export default {name:"theme",props: {//接收初始化传递过来的颜色color: String,},data() {return {//远端请求回来的css数据chalk: "",//绑定的主题色theme: "",};},computed: {//默认主题色defaultTheme() {return this.color;},},watch: {defaultTheme: {handler: function (val, oldVal) {//将默认主题色赋值给颜色选择器this.theme = val;},immediate: true,},//监听绑定的颜色的变化async theme(val) {const oldVal = this.chalk ? this.theme : ORIGINAL_THEME;if (typeof val !== "string") return;//新的主题色相关const themeCluster = this.getThemeCluster(val.replace("#", ""));//旧的主题相关色const originalCluster = this.getThemeCluster(oldVal.replace("#", ""));//如果主题的样式文件不存在则从远端重新获取，否则直接加载新的样式await this.getCSSString();this.getHandler(themeCluster);const styles = [].slice.call(document.querySelectorAll("style")).filter((style) => {const text = style.innerText;return (new RegExp(oldVal, "i").test(text) && !/Chalk Variables/.test(text));});console.log(styles,'wewe222')styles.forEach((style) => {const { innerText } = style;if (typeof innerText !== "string") return;style.innerText = this.updateStyle(innerText,originalCluster,themeCluster);});this.$emit("color-update", val);},},methods: {// 修改element-ui主题样式表颜色updateStyle(style, oldCluster, newCluster) {let newStyle = style;oldCluster.forEach((color, index) => {newStyle = newStyle.replace(new RegExp(color, "ig"), newCluster[index]);});return newStyle;},// 生成新的样式表getHandler(themeCluster) {//获取源styleconst originalCluster = this.getThemeCluster(ORIGINAL_THEME.replace("#", ""));const newStyle = this.updateStyle(this.chalk,originalCluster,themeCluster);let styleTag = document.getElementById("chalk-style");if (!styleTag) {styleTag = document.createElement("style");styleTag.setAttribute("id", "chalk-style");document.head.appendChild(styleTag);}styleTag.innerText = newStyle;},// 获取element-ui主题样式getCSSString() {const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`;return new Promise((resolve) => {const xhr = new XMLHttpRequest();xhr.onreadystatechange = () => {if (xhr.readyState === 4 && xhr.status === 200) {//获取到的element的样式this.chalk = xhr.responseText.replace(/@font-face{[^}]+}/, "");resolve();}};xhr.open("GET", url);xhr.send();});},//计算出相关的主题色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) {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));console.log(clusters,'wewe')return clusters;},},};
</script>

全网站色彩切换

思路：全网站的色彩切换其根本的原理在于在body上去添加不同的class 同时通过class名匹配的方式去修改其他内容的颜色

//页面初次加载的时候我们默认一个class
localStorage.setItem('theme',"default")

主题切换

handleChangeTheme(theme){//主题切换
let theme=theme?theme:"default"
localStorage.setItem('theme',theme)
dcoumnet.getElementByTagName('body')[0].className='theme'

/*在加载的scss文件中去定义每个主题下对相应的颜色变化*/
.logo{color:"pink" /*默认主题下是粉色*/
}
.dask{.logo{color:"white"/*黑色主题下是白色*/
}
}

这样就实现了全网站的色彩切换，有个不好的地方就是这种可能就需要我们写两组或者多组的样式实现样式，主题色的切换。
接下来探索更优的主题色彩切换方案

基于elementui的主题色改变和全网站色彩切换相关推荐

基于element-ui的主题换肤
今天分享的是基于element-ui的主题换肤功能需求效果如动图: 需求描述:根据客户的个人喜好,切换不同颜色风格的主题. 关键点1:在element-ui官方去配置主题颜色并且下载对应的文件,一 ...
elementUi自定义主题色（最简单优雅）
elementUi自定义主题色 Element 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变 Element 的样式变量: 1.新建一个样 ...
element-ui 整体替换主题色
自定义主题 Element 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式.我们提供了三种方法,可以进行不同程度的样式自定义. ¶仅替换主题色如果仅希望更换 Element ...
Element UI 改变主题色
文章目录前言第一种方法 1.安装scss包 2.新建一个样式文件引入第二种方法所以我们可以结合第一种和第二种情况推荐使用前言用于实现不同功能的系统往往需要独特的主题色,本文用于更改el ...
使用Win32 API获取Windows系统主题色
在Windows7以后增加了系统主题色的功能,这个功能一直延续到了Windows10.如图: 如果需要在程序中获取到这个颜色值,那么可以使用微软提供的一个Win32 API:DwmGetColoriz ...
vue + element-UI 实现深色模式和主题色动态切换
vue + element-UI 实现深色模式和主题色动态切换文章目录 vue + element-UI 实现深色模式和主题色动态切换前言深色模式和主题色动态切换本地样式切换主题色切换 el ...
在vue项目中引入element，并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径. 这里就说一下自己是如何引入UI框架的--vue中引入elementUI.(项目其实早已经开发完了,只是回过头来回顾一下自己当时是 ...
webpack插件实现自动抽取css中的主题色样式，并动态切换主题色（element-ui）
项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...
修改Windows10的主题色(文件夹也会改变)
修改Windows10的主题色(文件夹也会改变) 1.在桌面上右键鼠标,点击个性化.示例: 2.点击颜色->选择默认应用模式->暗.示例: 3.退出,显示文件夹的效果是黑色,感觉比之前的白 ...