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

2024-08-13 10:27:17

主要原理是利用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 动态切换主题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue的elementUI实现自定义主题方法

使用vue开发项目,用到elementUI,根据官网的写法,我们可以自定义主题来适应我们的项目要求,下面来介绍一下两种方法实现的具体步骤,(可以参考官方文档自定义主题官方文档),先说项目中没有使用scss编写,用主题工具的方法(使用的较多) 第一种方法:使用命令行主题工具使用vue-cli安装完项目并引入element-ui(具体可参考第二种方法中的介绍) 一.安装工具 1,安装主题工具 npm i element-theme -g 2,安装chalk主题,可以从 npm 安装或者从 GitH
vue如何根据网站路由判断页面主题色详解

前言本文主要介绍的是vue根据网站路由判断页面主题色的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧需求: 不同品牌对应不同版本配色做法: 根据域名带的参数判断进入哪个品牌,对应哪个版本在main.js中 import Vue from 'vue' import App from './App' import router from './router' import axios from 'axios' import MintUI from 'mint-ui'
vue+element 实现商城主题开发的示例代码

本文介绍了vue+element 实现商城主题开发的示例代码,分享给大家,具体如下: <template> <div> <div class="set-phone"> <el-form :model="theme" :rules="rules" ref="ruleForm" class="demo-ruleForm"> <el-form-item lab
vue+webpack 更换主题N种方案优劣分析

需求:由于业务需要,我们需要做多套皮肤调研了下当前行业的实现方案,五花八门良莠不齐,在此总结下各种方案有优劣及复杂度,供大家快速定位到符合自己业务的方案,以vue 单页应用为业务场景方式一:class切换方式实现: 在每个需要更换的页面定义多个class,根据运行时标识动态的切换class名称实现加载不同的样式,这种方式较为简单优点: 不需要修改构建工具相关业务开发过程可以实现,没有限制支持动态切换缺点: 逻辑分散耦合在各个页面,一旦需要修改,涉及修改的页面较多代码需要预先内置,
vue在线动态切换主题色方案

主要原理是利用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/for
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+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

前言开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,
vue实现动态列表点击各行换色的方法

只是模拟一练习 v-for v-on v-bind的一个简单demo 代码思路: 遍历出data里面的数据 v-for 给li加点击事件绑定class样式怎么控制样式的显示通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false 代码: <div id="app"> <ul> <li v-for='(item,index) in arr' v-bind:class='{
react实现antd线上主题动态切换功能

demo 框架选择: create-react-app + mobx + webpack5 + antdesign 说明由于最近公司有多个主题的共存性,所以需要实现线上主题切换的功能,所以本文主要描述的是基于create-react-app之上的主题切换. CSS切换有考虑过根据用户选择的主题在切换的时候选择加载页面css文件的区分方案,但是考虑到这种形式需要在页面切换的时候去reload,因为htmlDOM是在css与JS的结合产物,用户体验不是很好. Less切换单纯引入所有的less
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法

本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1
vue使用动态组件实现TAB切换效果

问题描述 tab切换的场景在开发中会经常用到.当需要实现这种效果的时候,我们常常会想到下面的方式去实现这个效果. 方式一使用display:none;去控制dom元素的显示与隐藏.从而实现,两个tab的显示与隐藏.不过如果有三四个tab要切换的话,这种方式就不可取了. 方式二使用vue中的指令v-if或者v-show实现.这种方式可以实现,不过代码写的不优雅.试想一个.vue文件中出现一大把v-if是什么样的效果?而且使用v-if还得声明很多的变量去做标识.所以不是十分好的的解决方案方式三
Java ASM使用logback日志级别动态切换方案展示

目录背景 logback简介解决方案方案一:logback自动扫描更新方案二:ASM动态修改字节码延伸扩展背景一切皆有因果,所有事情,都有事件驱动.本方案的日志级别切换是由这样的背景下产生的: 单个生产环境上,有几百近千个微服务日志级别切换不重启服务,要求即时生效果由业务开发人员去修改代码或增加相关依赖配置等涉及面广,推动进度慢后期动态实时过滤垃圾日志,减少io和磁盘空间成本 logback简介在跟敌人发起战争之前,只有先发解敌方的情况,才能做到百战百胜.要想对logbac
ant-design-pro使用qiankun微服务配置动态主题色的问题

使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色ant-design-pro可以通过config.ts配置全局主题色所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/ant-design-pro/releases/tag/v5.2.0已经支持了,通过<SettingDrawer>设置之前的版本不支持直接修改主题色.但是ant-design支持全局修改组件颜色跟着官方的

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

相关推荐

随机推荐