VUE online dynamic switching theme color scheme

The main principle is to extract the correlation color CSS using the WebPack plug-in WebPack-Theme-Color-Replaceer and then replace the CSS

according to the configuration dynamic generation, the specific implementation steps are as follows:

1. Add WebPack plug-in, new file webpack / themeplugin.js

const themecolorreplacer = required (‘WebPack-theme-color “const backgroundui = required (‘) Const foreElementui = Require webpack-theme-color-replacer / forElementUI ‘) const config = require (‘ ../ src / config / appConfig ‘) module.exports = new ThemeColorReplacer ({fileName:’ css / theme-colors [contenthash: 8].. CSS ‘, Matchcolors: [… forelightui.getlementuiseries (config.Themecolor), // Element-ui main color series //’ # 0cdd3a ‘, // Custom Color], Changeselector: ForElementui.Changeselector, isjsugly: Process. Env.node_env! == ‘development’, // injectcss: false, // resolVecss (resultcss) {// Optional. Resolve Result CSS code as you wish. //Return RESULTCSS + YOUCSSCODE //}})
 Multi-customized subject color   
2 in the MatchColors array is configured. Add this plugin in vue.config.js


constatePlugin = Require (‘./ WebPack / themeplugin’); Module.Exports = {ConfigureWebPack: {Plugins: [Themeplugin ]}}

3. New Document 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 // dynamically switching the theme color export function changeThemeColor (newColor) {var options = {NewColors: [… forElementui.Gtelementuiseries],} 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 ChangtHemecolor}}
4. Call the initThemecolor initialization color ChangetHemecolor change the topic color

 Import {initthemecolor, changethemecolor} from './UTILS/ThemecolorClient'initthemecolor()changethemecolor(' CHANGETHEMECOLOR ('#f56c6c' )// incoming color format should be a hex color value, 'red' similar color is not supported   
Please refer to https://github.com/hzsrc/vue-element-ui-scaffold-webpack4

To this article About VUE online dynamic switching The article’s article introduces this, more related VUE dynamic switch theme content, please search TUMI cloud, previous articles or continue to browse the following related articles, I hope everyone will support Tumi cloud!

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment