Wechat search [front-end full stack developer] pay attention to this hair loss, stall, selling goods, continuous learning programmer, the first time to read the latest article, will give priority to two days to publish new articles. Attention can be a gift package, you can save a lot of money!

In this article, I will implement dark\Light mode functionality into our Vue Vite application without using any libraries.

We’ll start by creating a simple Vite application and then set up a simple user interface for our application. Before creating our Vue application, I’d like to mention some great free Vue templates from WrapPixel that can be downloaded for free and used for personal and business use. They can save you time because you can use their amazing user interface directly in your projects, which will give your apps an amazing look and feel, so be sure to check it out.

Create a Vuejs Vite application

To set up the Vite application, open your terminal and enter the following:

npm init vite-app themeswitcher
Copy the code

This command will set up a new Vite application and then go into the project directory to install the project dependencies:

cd themeswitcher
npm install
Copy the code

After installation, we can now run our application using the NPM run dev command:

code . && npm run dev
Copy the code

The code. Command will open our application with VS Code.

Our application will now run on port 3000.

With the application up and running, we can now create the CSS. Create a CSS /dark. CSS file in the public directory. This is where we will store all our CSS code in the dark mode environment.

Add the following code to the dark.css file:

:root {
  --text: #ffffff;
  --background: #1d1d23;
}
body {
  background-color: var(--background) ! important;
}
h1.h2.h3.h4.h5.h6.p,
small,
a {
  color: var(--text) ! important;
}
Copy the code

We will now create a link tag in the head and set it to the dark. CSS file we created so that we can apply all the styles defined here.

We’ll use the Javascript class to do this, create a SRC /theme.js file in the SRC directory, and add the following code:

export default class themeChanger {
    / * * *@constructor* /
    constructor() {}
    _addDarkTheme() {
        const darkThemeLinkEl = document.createElement('link')
        darkThemeLinkEl.setAttribute('rel'.'stylesheet')
        darkThemeLinkEl.setAttribute('href'.'./css/dark.css')
        darkThemeLinkEl.setAttribute('id'.'dark-theme-style')
        const docHead = document.querySelector('head')
        docHead.append(darkThemeLinkEl)
    }
    _removeDarkTheme() {
        const darkThemeLinkEl = document.querySelector('#dark-theme-style')
        const parentNode = darkThemeLinkEl.parentNode
        parentNode.removeChild(darkThemeLinkEl)
    }
    _darkThemeSwitch() {
        const darkThemeLinkEl = document.querySelector('#dark-theme-style')
        if(! darkThemeLinkEl) {this._addDarkTheme()
        } else {
            this._removeDarkTheme()
        }
    }
}
Copy the code

We create three methods:

  • _addDarkTheme(): This adds the link tag to the application’s HTML head.
  • _removeDarkTheme(): This removes the link tag that has been added to the HTML head.
  • _darkThemeSwitch(): This toggles the add and remove methods to add and remove link tags in our HTML head.

We can continue to use this method in vue.js components.

Edit the components/HelloWorld. Vue the code, as shown below:

<template> <h3>Vite is the future of Frontend Developement.</h3> <small>Thanks to Evan You</small> <br /> <button @click="darkThemeSwitch">switch</button> </template> <script> import themeChanger from ".. /util/theme.js"; export default { name: "HelloWorld", props: { msg: String, }, data() { return { themeChanger: null, }; }, methods: { darkThemeSwitch() { this.themeChanger._darkThemeSwitch(); }, }, created() { this.themeChanger = new themeChanger(); }}; </script>Copy the code

We import an instance of the themeChanger class and store it in a vue.js data instance. We then create a button that will call the _darkThemeSwitch we created in the theme.js file.

With this done, we can now switch between light and dark modes in our application.

Original text: medium.com/js-dojo/imp…

By Sunil Joshi