Demand, through the button button to achieve different theme style switch. Implementation method: dynamically modify SCSS variables through JS. The whole idea is to declare a skin file, parse the result with @mixin, and call it in the page with @include, divided into three files:

Skin file theme. SCSS

$background-main-color1:#E9EDF0; $background-main-color2:#011E30; / / the background colorCopy the code

Parse the file mixin.scss

@import "./theme.scss"; @mixin background-main-color($color){//@mixin background-main-color: $color; $background-main-color2 $background-main-color2 $background-main-color2 $background-main-color2 $background-main-color2 $background-main-color2; // $background-main-color2 is already defined in theme. SCSS. }}Copy the code

Use xx.vue in pages (global or page import mixin.scSS)

<template> <div class="container"> <button @click="changeTheme">changeTheme</button> </div> </template> <script> export default { methods: {changeTheme() {// The first "background-main-color" refers to the name of our custom declaration in mixins, "background-main-color2" refers to the parameter we pass, which is equivalent to $color in mixins. If the condition is true, the following style will be used. window.document.documentElement.setAttribute("background-main-color","background-main-color2"); } } } </script> <style> @import '@/assets/style/mixin.scss'; Container {//background-main-color is the name defined in the mixin, and parentheses are the values declared in the theme. "#E9EDF0" @include background-main-color($background-main-color1); } </style>Copy the code

New to the boat, friends quickly like to support the ~