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

MySQL should never write update statements like this

Table of contents Preface cause Phenomenon why? A...

Build a WebRTC video chat in 5 minutes

In the previous article, I introduced the detaile...

Solution to the conflict between two tabs navigation in HTML

Let's start with a description of the problem...

Ubuntu 18.04 installs pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib

1. There are many Python version management tools...

Analysis of the process of publishing and deploying Spring Boot applications through Docker

Table of contents Manual deployment 1. Create a s...

Will the deprecated Docker be replaced by Podman?

The Kubernetes team recently announced that it wi...

Detailed explanation of log processing of Docker containers

Docker has many log plug-ins. The default is to u...

Solve the error of installing VMware Tools on Ubuntu 18.04

1. According to the online tutorial, the installa...

Record a slow query event caused by a misjudgment of the online MySQL optimizer

Preface: I received crazy slow query and request ...

Detailed explanation of the process of deleting the built-in version of Python in Linux

Big pit, don't easily delete the version of P...

Some tips for writing high-performance HTML applications

How can you improve web page performance? Most de...

How to handle spaces in CSS

1. Space rules Whitespace within HTML code is usu...

Simple example of using Docker container

Table of contents 1. Pull the image 2. Run the im...

Solution to the error problem of Vscode remotely connecting to Ubuntu

1. Background of the incident: Because of work ne...

Learn the black technology of union all usage in MySQL 5.7 in 5 minutes

Performance of union all in MySQL 5.6 Part 1:MySQ...