Implement Dark Mode in Vue Vite App

In this article, we will be implementing the dark mode in Vue Vite app without using any library. Here we’re providing you with a detailed vuejs tutorial guide to learn from scratch.

We will start by creating a simple Vite application and then set up a simple user interface for our application.

Before creating our Vue Application, I would like to mention some great Free Vue Templates from WrapPixel, they are free to download and use for personal as well as commercial use.

They can save you 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. This vue tutorial is meant to guide you about the basics of vue js application structure and coding.

Creating A Vuejs Vite Application

To set up 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.

Dark Mode in Vue Vite App

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 these methods in our Vuejs Component for the vue tutorial.

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 in the Vuejs data instance. We then create a button that 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 vue vite app.

We have seen how to implement dark mode in Vue Vite app. You can also check our article on How to Build a Shopping Cart in Vue Vite which will help you to build a shopping cart if you are looking at how to get started with Vue Vite then you can check out our article How to Get Started with Vue Vite. Follow up on this vuejs tutorial to get a better understanding.