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

Detailed process of installing nginx1.9.1 on centos8

1.17.9 More delicious, really Nginx download addr...

JS implements a detailed plan for the smooth version of the progress bar

The progress bar is not smooth I believe that mos...

How to reset password after forgetting password in MySQL8 (MySQL old method doesn't work)

The command line mysqld –skip-grant-tables cannot...

JavaScript+html to implement front-end page sliding verification (2)

This article example shares the specific code of ...

Install Windows Server 2019 on VMware Workstation (Graphic Tutorial)

If prompted to enter a key, select [I don’t have ...

Vue simple implementation of turntable lottery

This article shares the specific code of Vue to s...

Steps to create a WEBSERVER using NODE.JS

Table of contents What is nodejs Install NodeJS H...

How to monitor multiple JVM processes in Zabbix

1. Scenario description: Our environment uses mic...

Four categories of CSS selectors: basic, combination, attribute, pseudo-class

What is a selector? The role of the selector is t...

Detailed explanation of the execution plan explain command example in MySQL

Preface The explain command is the primary way to...

Mysql example of converting birth date into age and grouping and counting the number of people

Querying the database SELECT * FROM `student` Que...

How to quickly modify the table structure of MySQL table

Quickly modify the table structure of a MySQL tab...

MySQL database operations (create, select, delete)

MySQL Create Database After logging into the MySQ...

XHTML Tutorial: The Difference Between Transitional and Strict

In fact, XHTML 1.0 is divided into two types (thr...

How to parse the attribute interface of adding file system in Linux or Android

The first one: 1. Add key header files: #include ...