vue 动态改变主题颜色

实现效果

一。应用方法

1.css3伪类选择器

2.CSSStyleDeclaration.setProperty() 方法接口为一个声明了 CSS 样式的对象设置一个新的值。

语法 style.setProperty(propertyName, value, priority);

参数

propertyName 是一个 DOMString ，代表被更改的 CSS 属性。
value可选是一个 DOMString ，含有新的属性值。如果没有指定，则当作空字符串。
- 注意: value 不能包含 "!important" --那个应该使用 priority 参数。
priority可选是一个 DOMString 允许设置 "important" CSS 优先级。如果没有指定，则当作空字符串

二。定义主题颜色（黑、白）

创建一个theme.json文件，定义变量名称以及对应颜色（字体、背景、边框颜色等）

{"white":{"--maintextcolor": "#222222","--mainbgcolor": "#ffffff","--mainbordercolor":"1px solid #CDD6F0","--otherbgcolor":"#CDD6F0","--hovercolor":"#F5F7FA","--webkitbgcolor":"#EFEFEF","--webkitbtncolor":"#BFBFBF","--disablecolor":"#e3e3e3","--disabletextcolor":"#7c7575","--paginationcolor":"rgba(48,93,190,0.10)","--paginationbordercolor":"1px solid #305DBE","--buttonbgcolor":"rgba(48,93,190,0.16)","--buttoncolor":"#305DBE","--buttonbordercolor":"1px solid rgba(48,93,190,0.7)","--buttonborderredcolor":"1px solid rgba(222,80,68,0.7)","--buttonredcolor":"#DE5044","--buttonbgredcolor":"rgba(222,80,68,0.16)"},"black":{"--maintextcolor": "#ffffff","--mainbgcolor": "#28282B","--mainbordercolor":"1px solid rgb(255,255,255,0.25)","--otherbgcolor":"#3E4D6C","--hovercolor":"#193b6a","--webkitbgcolor":"#222","--webkitbtncolor":"#666","--disablecolor":"#7c7575","--disabletextcolor":"#e3e3e3","--paginationcolor":"#449DFF","--paginationbordercolor":"none","--buttonbgcolor":"rgba(48,93,190,0.16)","--buttonbordercolor":"1px solid rgba(68,157,255,0.35)","--buttonborderredcolor":"1px solid rgba(222,80,68,0.35);","--buttoncolor":"#449DFF","--buttonredcolor":"#DE5044"}
}

三。将样式通过切换按钮动态添加到html上

创建 addcolor.js文件

// 主题样式
import themes from './theme.json'export function addColor (init){const theme = localStorage.themeconst {white,black,obj={}} = themes// 1.localStorage.theme 不存在默认黑色 2.存在并且刷新页面不改变主题 3.存在并且点切换才改变主题if(!theme){localStorage.setItem('theme','black')Object.assign(obj,black)}else {if(init)Object.assign(obj,theme == 'black'? black : white)else{localStorage.setItem('theme',theme == 'black'?' white' : 'black')Object.assign(obj,theme == 'black'? white : black)}}// html 添加主题样式for (const key in obj) {document.documentElement.style.setProperty(key, obj[key]);}
}

在页面上使用addcolor方法

<el-button @click="addColor(false)" class="btn">换肤</el-button><script>
import { addColor } from '../utils/style/addcolor';
export default {name: 'Layout',methods: {addColor(){console.log('换肤');addColor()}}
}
</script>

四。第一次加载页面或者刷新加载页面要调用一次addColor方法，在main.js引入进行调用

import Vue from 'vue'
import echarts from 'echarts'
import 'normalize.css/normalize.css' // A modern alternative to CSS resetsimport ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import multiCascader from '@/components/multiCascader/index'
import elTableInfiniteScroll from 'el-table-infinite-scroll'
import '@/styles/index.scss' // global css
import '@/styles/standingBook.scss' // standingBook cssimport App from './App'
import store from './store'
import router from './router'// 中文版 element-ui
Vue.use(ElementUI)
Vue.use(multiCascader) // 级联选择器
Vue.config.productionTip = false
Vue.use(elTableInfiniteScroll)import { addColor } from './utils/style/addcolor';
addColor(true)new Vue({el: '#app',router,store,render: h => h(App)
})

五。在项目中应用css（在style样式中通过var()进行使用）

.shrink {margin-left: 32px;/deep/ .el-transfer-panel {width: 244px;height: 338px;//应用设置好的主题css样式background-color: var(--mainbgcolor);border: var(--mainbordercolor);.el-transfer-panel__header {background-color: var(--mainbgcolor);border: var(--mainbordercolor);.el-checkbox {.el-checkbox__label {font-size: 14px;color: var(--maintextcolor);font-weight: 600;span {color: var(--maintextcolor);}}}}}// 穿梭框中心内容样式/deep/ .el-transfer-panel__body {.el-transfer-panel__filter {input {background-color: var(--mainbgcolor);border: var(--mainbordercolor);width: 196px;height: 32px;border-radius: 0;border-radius: 4px;}}.el-checkbox-group {span {color: var(--maintextcolor);}}.el-checkbox-group::-webkit-scrollbar {width: 0px;}}// 穿梭框的中间按钮样式>>> .el-transfer__buttons {.el-button {border-radius: 4px;border: var(--mainbordercolor);background: var(--mainbgcolor);color: var(--maintextcolor);}.el-button--primary.is-disabled {border-radius: 4px;border: var(--mainbordercolor);background: var(--mainbgcolor);color: var(--maintextcolor);}}}/deep/ .el-dialog {width: 750px;height: 545px;.dialog-footer {text-align: center;}}.el-button{background: var(--buttonbgcolor);padding: 6px 8px;color: var(--buttoncolor);border: var(--buttonbordercolor);}

参考博客：https://blog.csdn.net/qq_42570449/article/details/121689015?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-11-121689015-null-null.pc_agg_new_rank&utm_term=vue+%E6%9B%B4%E6%8D%A2%E6%8C%89%E9%92%AE%E7%9A%84%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE&spm=1000.2123.3001.4430https://blog.csdn.net/qq_42570449/article/details/121689015?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-11-121689015-null-null.pc_agg_new_rank&utm_term=vue+%E6%9B%B4%E6%8D%A2%E6%8C%89%E9%92%AE%E7%9A%84%E8%83%8C%E6%99%AF%E9%A2%9C%E8%89%B2+%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE&spm=1000.2123.3001.4430

vue 动态改变主题颜色相关推荐

vue动态改变主题颜色
新建.scss后缀公用文件,放在assets或者其他地方都可以 /*需要切换的颜色变量*/ $color-primary1:#1776E1; /* 更换的颜色 */ $color-primary2:# ...
WPF动态改变主题颜色
国内的WPF技术先行者周银辉曾介绍过如何动态改变应用程序的主题样式,今天我们来介绍一种轻量级的改变界面风格的方式--动态改变主题色. 程序允许用户根据自己的喜好来对界面进行配色,这种技术在很多软件中都 ...
antd动态换主题颜色
1.下载插件 npm add antd-theme-generator && yarn add antd-theme-generator 2.根目录添加color.js const p ...
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
vue改变html的背景,vue动态改变背景图片demo分享
如下所示: #bag{ width: 200px; height: 500px; margin: 0 auto; background: url(img/piao11.jpg) center no-r ...
vue基于scss的动态切换主题颜色
根据预设的配色方案,在前端动态切换系统主题颜色大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量. ...
vue项目使用svg渲染地图并添加点击事件，动态改变背景颜色
需求: ui给了一张地图的svg,需要前端渲染出来并添加对应的点击事件,选中区域,背景颜色需要改变实现思路: 1.拿到需要渲染的 svg图片,把其中path的值赋值过来,所有数据一起组成一个新的js ...
mpvue微信小程序中使用svg图标，并通过代码动态改变图标颜色
微信小程序,mpvue中使用svg图标,并通过代码改变图标颜色本文主要是mpvue开发小程序的代码,不过微信小程序原生开发应该也是一样的,思路都是通用的,按照这个思路微信小程序原生开发一样可以实现同 ...
一键换肤--动态更换主题颜色风格
基于前一段时间项目具有换肤需求的功能,几经预研学习换肤功能效果,网上的资源很多,最初看到是网易换肤的酷炫效果,今天得空打算写一篇关于换肤功能的文章,项目无需重启Activity的就可以实现无缝换肤切换 ...

vue 动态改变主题颜色

vue 动态改变主题颜色相关推荐

最新文章

热门文章