Vue skin replacement example and vue skin replacement example

Vue skin replacement example and vue skin replacement example

Recently, the company's project has gained a requirement for website skin replacement, that is, switching themes. How can I change the theme color? Switching the theme color is actually switching CSS. However, in the project, not only CSS needs to be changed, but icons and images also need to be switched with the theme. Therefore, write an article to record the Vue skin replacement process. Let's take a look at the effect first.

This article consists of three parts: CSS switching, icon switching, and image switching.

CSS Switching

For CSS color switching, I searched and referred to the ElementUI solution, which is generally divided into four steps.

Create a theme.css file in the static directory and declare the CSS file to be replaced.

.side-bar { background: linear-gradient(#B7A3FF, #879FFF) !important;}.side-bar .account-info { background: #8981D8 !important;}

Declare all optional themes. Each color corresponds to a keyword for easy differentiation.

colors: [{ themeId: 1, familyPrimary: '#B7A3FF', familySecondary: '#879FFF', sideBarTop: '#8981D8'}, { themeId: 2, familyPrimary: '#FDC5C5', familySecondary: '#F070A0', sideBarTop: '#E7829F'}, { themeId: 3, familyPrimary: '#414D6C', familySecondary: '#2D1E3C', sideBarTop: '#423C50'}]

Use AJAX to obtain theme.css and replace the color value with a keyword.

 getFile(`/static/theme.css`)  .then(({data}) => {   let style = getStyleTemplate(data)  })function getStyleTemplate (data) { const colorMap = {  '#B7A3FF': 'familyPrimary',  '#879FFF': 'familySecondary',  '#8981D8': 'sideBarTop' } Object.keys(colorMap).forEach(key => {  const value = colorMap[key]  data = data.replace(new RegExp(key, 'ig'), value) }) return data}

Replace the keyword with the color value you just generated, and add the style label on the page.

 getFile(`/static/theme.css`)  .then(({data}) => {   let style = getStyleTemplate(data)   writeNewStyle(style, this.color)  })function writeNewStyle (originalStyle, colors) { let oldEl = document.getElementById('temp-style') let cssText = originalStyle Object.keys(colors).forEach(key => {  cssText = cssText.replace(new RegExp(key, 'ig'), colors[key]) }) const style = document.createElement('style') style.innerText = cssText style.id = 'temp-style' oldEl ? document.head.replaceChild(style, oldEl) : document.head.appendChild(style)}

Icon Switching

Since the project did not take into account the requirements for skin replacement at the beginning, all icons are referenced using the img label,

In this way, the icon color cannot be switched dynamically. Therefore, I decided to use the icon in the font file mode. We recommend a website named icomoon, which can easily convert images into font files. The icon is also very suitable for use through the font method, we can more easily modify the Icon size and color.

Through online conversion, we put the downloaded font file into the project, and create a new CSS file to declare all the icons.

@font-face { font-family: 'icomoon'; src: url('../assets/fonts/icomoon.eot?vpkwno'); src: url('../assets/fonts/icomoon.eot?vpkwno#iefix') format('embedded-opentype'), url('../assets/fonts/icomoon.ttf?vpkwno') format('truetype'), url('../assets/fonts/icomoon.woff?vpkwno') format('woff'), url('../assets/fonts/icomoon.svg?vpkwno#icomoon') format('svg'); font-weight: normal; font-style: normal;}[class^="icon-"], [class*=" icon-"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: sub; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-edit:before { content: "\e900";}

Then you can reference the icon by using the CSS class name.

 <span class="icon-edit"></span>

To make the theme.css file take effect, we also need to write the css of the icon into the theme.css file.

.icon_edit:before { background-image: linear-gradient(-135deg, #879FFF 0%, #B7A3FF 100%);}

Image Switching

There are still many bitmap or other images in the project that will change with the theme. Introduce all images and use file names to differentiate the images corresponding to different themes. When you click switch topic, switch to the file corresponding to the topic to switch the image. To this end, I wrote a mixin and introduced it to the component.

PlaceholderMixin

let callbackconst placeholderMixin = { data () {  return {   placeholderWoman: '',   placeHolderNoReply: '',   placeHolderNothing: ''  } }, created () {  let themeId = localStorage.getItem('themeId')  let theme = themeId2Name(themeId)  this.setThemeValue(theme)  callback = (theme) => {   this.setThemeValue(theme)  }  bus.$on('changeTheme', callback) }, destroyed () {  bus.$off('changeTheme', callback) }, methods: {  setThemeValue (theme) {   this.placeholderWoman = require(`@/assets/placeholder_woman_${theme}.svg`)   this.placeHolderNoReply = require(`@/assets/icon_noreply_${theme}.svg`)   this.placeHolderNothing = require(`@/assets/icon_nothing_${theme}.svg`)  } }}

When you click to switch the topic, a changeTheme event will be triggered. When each component receives the changeTheme event, it will assign a new value to the image, achieving the effect of switching the image.

let theme = themeId2Name(this.themeId)bus.$emit('changeTheme', theme)

In this way, the effect of topic switching is achieved, but this method requires introducing mixin to almost all business components. If you have a better method, please contact me.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.