Implementing Dark/Light mode in your Vue Vite Application

In this article we will be implementing the dark/light mode feature into our Vue Vite application without using any library.

We will start by creating a simple Vite application and then setup a simple user interface for our application. Before creating our Vue Application, i would like to mention about some great Free Vue Templates from WrapPixel, they are free to download and use for personal as well as commercial use. They can save your tons of time as you can use their stunning user interfaces directly in your project, which will give amazing look & feel to your application. So do check them out.

Creating A Vuejs Vite Application

To setup a Vite application, open up your terminal and type the following:

npm init vite-app themeswitcher

This command will scaffold a new vite application, We will have to move into the project directory and install the project dependencies:

cd themeswitcher
npm install

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

code . && npm run dev

The code . command will open up our application in VS Code.

Our application will now be running on port 3000.

With our application up and running we can now create our css asset. Create a css/dark.css file inside the public directory. This is where we will be storing all our css code for our dark mode environment.

Add the following codes in 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;
}

We have to now create a method that will now create a link tag inside our html head, which will set it to the dark.css file that we created so that all the styles that we have defined there can be applied.

We will be using Javascript classes to do this, Create a src/theme.js file inside the src directory and add the following codes:

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()
        }
    }
}

We create 3 methods:

• _addDarkTheme(): This will add the link tag to the HTML head of our application.
• _removeDarkTheme():This will remove the link that has been added to the HTML head.
• _darkThemeSwitch():This will toggle the add and remove methods to add and remove the link tag in our HTML head.

We can go ahead and use this methods in our Vuejs Component.

Edit the codes in components/HelloWorld.vue to this:

<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>

We bring in the instance of our themeChanger class and then store it the Vuejs data instance. We then create a button which will call the _darkThemeSwitch that we created in the theme.js file.

With this done, we can now toggle between light and dark mode in our application.

You can also check our article on how you can creat shopping cart in Vue Vite