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.

Please continue reading from WrapPixel - https://www.wrappixel.com/implementing-dark-light-mode-in-your-vue-vite-application/