preface

Recently, we need to do a skin function, but only for a page to skin, change the background, background, border, font color, etc., not the whole project skin, relatively simple, so the skin method introduced below only applies to the page skin rather than the whole project skin.

plan

A search of information revealed two options

  1. Write a set of styles for each skin, then use a class on the outermost layer to act as a namespace, then attach this class to the body, and use this class to change the skin
  2. Write a configuration for each set of skin, extract the style that needs to be skinned, click skin, change the style according to the configuration, see the code below for details

I chose Option 2 because option 1 requires one set of styles for each skin, and I think option 2 is easier to maintain by writing one set of configurations for each skin

implementation

Create a CSS file named default-theme. CSS in static/theme as the default theme and import it into your code

Header {border-color: #ffeb00; } .content { background: url("/static/theme/yellow/bg.jpg"); } .footer { background-color: #ffeb00; }Copy the code
Import '/static/theme/default-theme.css'Copy the code

Create theme. Js to write the skin configuration and the map object to match the default style with the keyword

// Theme configuration const theme = {yellow: {headerBorderColor: #ffeb00, contentBg: '/static/theme/yellow/bg', footerBgColor: #ffeb00 }, blue: { headerBorderColor: #007fff, contentBg: '/static/theme/blue/bg', footerBgColor: #007fff}} // Match with key in default topic and replace with value const themeMap = {'#ffeb00': 'headerBorderColor', '/static/theme/yellow/bg': 'contentBg', '#ffeb00': 'footerBgColor' } export { theme, themeMap }Copy the code

Switch themes in four steps

  1. Get it first using AXIosdefault-theme.css
  2. Replace style with keyword: usethemeMapThe key value of is matched and replaced with value
  3. Go through step 2default-theme.cssThis step replaces the keyword with style, usingthemeThe key of the subject is matched, and then replaced with value
  4. Write the processed style to style and mount it to Document

It’s easier to look at the code

< the template > < ul > < li @ click = "changeTheme (' yellow ')" > yellow < / li > < li @ click = "changeTheme (' blue ')" > blue < / li > < / ul > < / template > <script> import { theme, themeMap } from 'theme.js' export default { methods: {changeTheme(themeName) {// First step: $axios.get('/static/theme/default-theme.css'). Then (({data}) => {// Keys (themeMap). ForEach (key => {const value = themeMap[key] data = data.replace(new RegExp(key, 'ig'), Value)}) // Keys (curTheme). ForEach (key => {const value = curTheme[key] data = Data.replace (new RegExp(key, 'ig'), value)}) Write the processed style to style, Const styleDom = document.createElement('style') styledom. innerText = data styledom. id = 'theme-style' const oldEl = document.getElementById('theme-style') oldEl ? document.head.replaceChild(styleDom, oldEl) : document.head.appendChild(styleDom) }) } } } </script>Copy the code

reference

Vue peel practice

Skin changing solution based on Vue and ElementUI