Vue implements multiple ideas for theme switching

Vue implements multiple ideas for theme switching

Dynamically change themes

The first thing you need to solve is how to know which theme you need to display and switch it dynamically. The method I chose is queryString.

When we open the URL, we can add ?theme=xx to the end, read this xx and store it.

The first method: dynamic components

When the theme's route has not changed, but only the style and function inside the component have changed, we can copy a component, modify it, and implement it through lazy loading and dynamic components.

// Page component <template>
    <div>
        <component :is="themeName" />
    </div>
</template>
<script>
    export default{
        name: 'Home',
        components:{
            theme1:()=>import('@/theme/theme1/a'),
            theme2:()=>import('@/theme/theme2/a'),
        },
        computed:{
            themeName(){
                return `theme${this.$store.state.themeId}`
            }
        }
    }
</script>

In the components, I extracted the script part because most components are actually logically the same. Even if there are some differences, we can change them directly in the components of Theme 2 to reduce the impact on Theme 1.

//action.js
export default{
    name:'Theme1',
    ....
}
<template>
<div class="theme1"></div>
</template>
<script>
    import action from '../componentAction/action'
    action.name='Theme1'
    export default action
</script>
<style scoped>

</style>

The advantage of this implementation is that style isolation can be achieved through the style scoped of the subcomponent, and the functional data will be isolated at the same time. For example, the swipers in two subcomponents will not affect each other. At the same time, lazy loading also reduces the size of the homepage when loading. Adding additional themes later would just be a copycat.

The second method is routing isolation

Routing isolation is actually as simple as writing an array of routes in theme1 and a set of routes in theme2.

// router.js
{
    path:'/theme3',
    name:'theme3Index',
    component: () => import('../views/theme3/Index.vue'),
    children:[
      {
        path: '/theme3/entry',
        name: 'theme3Entry',
        component: () => import('../views/theme3/entry.vue'),
      }
     ]
 }

This method is actually a last resort. I use this mainly because the route has changed. For example, I used to go directly to a.vue, but now there is an extra entry page in front, so I can only change the route. This method also achieves better isolation.

Summarize

The above two ideas are my thoughts on our current business and are for reference only.

In fact, these two methods have a common problem, which is code redundancy. Each component inevitably carries some of the code from the previous theme. Although most of the logic code can be extracted, CSS and template cannot be extracted.

If a theme adds a dom and a functional block every time, and if v-if is used every time, the code will be more difficult to maintain in the future. Therefore, I chose to divide the codes by theme.

Two additional methods based on CSS

Method 1: Multiple sets of CSS

<!-- Center -->
<template>
 Dynamically obtain the parent class name and define a parent class multiple times <div :class="className">
    <div class="switch" v-on:click="chang()">
      {{ className == "box" ? "Turn on the light" : "Turn off the light" }}
    </div>
  </div>
</template>
<script>
export default {
  name: "Centre",
  data() {
    return {
      className: "box"
    };
  },
  methods: {
  // Change class
    chang() {
      this.className === "box"
        ? (this.className = "boxs") 
        : (this.className = "box");
    }
  },
};
</script>
<style lang="scss">
When the class is box, use witch's CSS
@import "./style/witch.scss";
When the class is boxes, use black CSS
@import "./style/black.scss";
.switch {
  position: fixed;
  top: 4px;
  right: 10px;
  z-index: 50;
  width: 60px;
  height: 60px;
  background: #fff;
  line-height: 60px;
  border-radius: 20%;
}
</style>

The styles of each css file are roughly the same, except that the outermost parent is different, namely .box and .boxs

Method 2: Dynamically switch variables in scss

I divided it into 2 main files.

  • _variable.scss variable management file
  • var() is a method for declaring style variables proposed in CSS3
  • var(attribute name, attribute value) Note that attribute values ​​cannot be strings
// Theme switching $bgColor:var(--backgroundColor,rgb(255,255,255));
$fontColor:var(--fontColor,rgb(0,0,0));
$bgmColor:var(--backgroundMColor,rgb(238,238,238));
$tableColor:var(--tableColor,rgb(218,218,218));
$borderColor:var(--borderColor,rgb(238,238,238));
$tablesColor:var(--tablesColor,rgb(255,255,255));
$inputColor:var(--inputColor,rgb(255,255,255))

I created a global configuration for the _variable.scss file in vue.config.js, but did not introduce it in the component.

  css: {
    loaderOptions: {
      // This file is the theme switching file sass: {
        prependData: `@import "./src/styles/_variable.scss";`,
      },
    },
  },

publicStyle.js

This method can modify the variables defined by var
document.getElementsByTagName("body")[0].style.setProperty("property name", "replaced property value f");

// Theme switching const cut = (cutcheack) => {
    document.getElementsByTagName("body")[0].style.setProperty("--backgroundColor", cutcheack ? "#121212" : "#fff");
    document.getElementsByTagName("body")[0].style.setProperty("--fonntColor", cutcheack ? "#cecece" : "#333");
    document.getElementsByTagName("body")[0].style.setProperty("--backgroundMColor", cutcheack ? "#333" : "#eee");
    document.getElementsByTagName("body")[0].style.setProperty("--tableColor", cutcheack ? "#000" : "#d8d8d8");
    document.getElementsByTagName("body")[0].style.setProperty("--tablesColor", cutcheack ? "#222" : "#fff");
    document.getElementsByTagName("body")[0].style.setProperty("--inputColor", cutcheack ? "#666" : "#fff");
    document.getElementsByTagName("body")[0].style.setProperty("--borderColor", cutcheack ? "#666" : "#fff");
};
export default cut;

Used in components

<!-- Home -->
<template>
<div class='home'>
      <el-switch v-model="cutcheack" active-color="#333" inactive-color="#13ce66" active-text="Theme" @change="switchs"></el-switch>
</div>
</template>
<script>
import cut from "../../utils/publicStyle.js";
export default {
  name: "Home",
  data() {
    return {
      cutcheack: false, //Theme switch};
  },
  methods: {
    //Hide or show the left navigation //Switch the theme switches() {
      cut(this.cutcheack);
    },
  },
};
</script>
<style lang='scss' scope>
.home {
    height: 100%;
    width: 100%;
	background:$bgColor;
    .el-container {
        height: 100%;
        color:$fontColor;
    }
}
</style>

The above is the detailed content of sharing various ideas for implementing theme switching in Vue. For more information about Vue theme switching, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • Various methods of implementing theme switching in VUE projects
  • Vue + Scss dynamically switch theme colors to achieve skinning example code
  • Implementation ideas of online theme editor for vue component library
  • Vue online dynamic switching theme color scheme
  • Sample code for vue+element to develop shopping mall themes
  • Vue+webpack change theme N solutions pros and cons analysis
  • How to determine the page theme color based on the website routing in Vue
  • Vue's elementUI implements custom theme methods

<<:  Detailed tutorial on installing mysql under Linux

>>:  Embedded transplant docker error problem (summary)

Recommend

Solve the problems encountered when installing MySQL 8.0 on Win10 system

The problems and solutions encountered when insta...

Detailed explanation of where the images pulled by docker are stored

The commands pulled by docker are stored in the /...

How to configure user role permissions in Jenkins

Jenkins configuration of user role permissions re...

mysql 5.6.23 winx64.zip installation detailed tutorial

For detailed documentation on installing the comp...

A brief discussion on VUE uni-app template syntax

1.v-bind (abbreviation:) To use data variables de...

Solve the problem of running jupyter notebook on the server

Table of contents The server runs jupyter noteboo...

Vue Getting Started with Weather Forecast

This article example shares the specific code of ...

Detailed explanation of common Docker commands

1. Help Command 1. View the current Docker versio...

Detailed tutorial on installation and configuration of nginx under Centos7

Note: The basic directory path for software insta...

WeChat applet + ECharts to achieve dynamic refresh process record

Preface Recently I encountered a requirement, whi...

Mysql 5.7.17 winx64 installation tutorial on win7

Software version and platform: MySQL-5.7.17-winx6...

SQL Get stored procedure return data process analysis

This article mainly introduces the analysis of th...

Nginx http health check configuration process analysis

Passive Check With passive health checks, NGINX a...

Linux server quick uninstall and install node environment (easy to get started)

1. Uninstall npm first sudo npm uninstall npm -g ...

Sample code for implementing history in vuex

I have recently been developing a visual operatio...