vue在线动态切换主题色方案


Posted in Javascript onMarch 26, 2020

主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css

具体实现步骤如下:

1.添加webpack插件,新建文件webpack/themePlugin.js

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')
const config = require('../src/config/appConfig')
module.exports = new ThemeColorReplacer({
  fileName: 'css/theme-colors.[contenthash:8].css',
  matchColors: [
    ...forElementUI.getElementUISeries(config.themeColor), //element-ui主色系列
    // '#0cdd3a', //自定义颜色
  ],
  changeSelector: forElementUI.changeSelector,
  isJsUgly: process.env.NODE_ENV !== 'development',
  // injectCss: false,
  // resolveCss(resultCss) { // optional. Resolve result css code as you wish.
  //   return resultCss + youCssCode
  // }
})

matchColors数组中可配置多个自定义要替换的主题色

2.在vue.config.js中添加这个插件

const themePlugin=require('./webpack/themePlugin');
module.exports = {
 configureWebpack: {
  plugins: [
        themePlugin
       ]
  }
 }

3.新建文件themeColorClient.js

import client from 'webpack-theme-color-replacer/client'
import forElementUI from 'webpack-theme-color-replacer/forElementUI'
import appConfig from '@/config/appConfig'
export let curColor = appConfig.themeColor

// 动态切换主题色
export function changeThemeColor(newColor) {
  var options = {
    newColors: [...forElementUI.getElementUISeries(newColor)],
  }
  return client.changer.changeColor(options, Promise)
    .then(() => {
      curColor = newColor
      localStorage.setItem('theme_color', curColor)
    });
}

export function initThemeColor() {
  const savedColor = localStorage.getItem('theme_color')
  if (savedColor) {
    curColor = savedColor
    changeThemeColor(savedColor)
  }
}

4.在需要的时候调用 initThemeColor初始化颜色 changeThemeColor改变主题颜色

import { initThemeColor,changeThemeColor } from './utils/themeColorClient'
initThemeColor()
changeThemeColor('#F56C6C')//传入颜色格式应该为十六进制颜色值,'red'类似颜色暂不支持

具体细节请参考https://github.com/hzsrc/vue-element-ui-scaffold-webpack4

到此这篇关于vue在线动态切换主题色方案的文章就介绍到这了,更多相关vue 动态切换主题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
jQuery页面刷新(局部、全部)问题分析
Jan 09 Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 Javascript
微信小程序实现animation动画
Jan 26 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
javascript实现简单搜索功能
Mar 26 #Javascript
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
vue+element 实现商城主题开发的示例代码
Mar 26 #Javascript
js实现带箭头的进度流程
Mar 26 #Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 #Javascript
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
You might like
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js中方法重载如何实现?以及函数的参数问题
2013/08/01 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
Angular4学习笔记之根模块与Ng模块
2017/09/09 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python中列表和元组的区别
2017/12/18 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
详解python单元测试框架unittest
2018/07/02 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
入党介绍人评语
2014/05/06 职场文书
课外活动总结范文
2014/07/09 职场文书
就业意向协议书
2015/01/29 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
Vue3如何理解ref toRef和toRefs的区别
2022/02/18 Vue.js
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android
CSS的calc函数用法小结
2022/06/25 HTML / CSS
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技