--- title: "Implement Light/Dark mode in Vue Vite application" description: "Implement Light/dark mode in vue vite application Implementing light/dark features in any application is most important nowadays. Because users generally prefer dark mode because it’s catchy and..." url: https://blog.codedthemes.com/implement-light-dark-mode-in-vue-vite-application/ date: 2020-10-14 modified: 2024-02-17 author: "Ankita Nathani" image: https://blog.codedthemes.com/wp-content/uploads/2020/10/dark-mode-in-vue-vite-application-1.png categories: ["Web Designing"] tags: ["light/dark", "Light/dark mode in vue vite", "switch mode", "vue app", "vue vite"] type: post lang: en --- # Implement Light/Dark mode in Vue Vite application Implement Light/dark mode in vue vite application Implementing light/dark features in any application is most important nowadays. Because users generally prefer dark mode because it’s catchy and attractive. In this article, we will implement the light/dark mode feature into vue vite application without using the library. First of all, we create a (https://blog.codedthemes.com/introduction-to-vitejs/) for the user interface. Before creating an application I would like to recommend the best vue template, there are free to download for any project and extend feature via premium version. The template saves developer time and efforts and provides a stunning user interface. ## **Creating a Vue vite application** - To set up your application, open the Vue interface. Type the following command. - Next, move into the project directory and install project dependencies. - After completing the installation, run the application using the following command. - The ` code.` the command will open your application in VS Code. **We are going t start with a blank application and implementing dark theme CSS, which file save in public/css/darktheme.css.** Default vue application layout without CSS. ## Create Light/Dark mode in Vue Vite application: Add the below code in **darktheme.css**. ![5](https://blog.codedthemes.com/wp-content/uploads/2020/10/5-1.png) We can test our theme by appending the following line in **** of **public/index.html**. ![6](https://blog.codedthemes.com/wp-content/uploads/2020/10/6-1.png) ![7](https://blog.codedthemes.com/wp-content/uploads/2020/10/7-1.png) Now let’s make this interactive! In `src/App.vue` we’ll add a button and the following methods: ![8](https://blog.codedthemes.com/wp-content/uploads/2020/10/8-1.png) ![9](https://blog.codedthemes.com/wp-content/uploads/2020/10/9.png) Whenever we click on the switch theme button, it’s automatically changing the mode. This is a quick and easy way to implement light/dark mode in the VueJS Application. find best Light /dark mode (https://codedthemes.com/item/category/templates/admin-templates/) on here. **Read more articles –** - (https://blog.codedthemes.com/how-to-migrate-from-cra-to-vite-for-react/) - (https://blog.codedthemes.com/no-code-vs-full-code-development-which-is-better/) - (https://blog.codedthemes.com/vue-component-libraries/) Share this:[](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fimplement-light-dark-mode-in-vue-vite-application%2F&linkname=Implement%20Light%2FDark%20mode%20in%20Vue%20Vite%20application)[](https://www.addtoany.com/add_to/x?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fimplement-light-dark-mode-in-vue-vite-application%2F&linkname=Implement%20Light%2FDark%20mode%20in%20Vue%20Vite%20application)[](https://www.addtoany.com/add_to/reddit?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fimplement-light-dark-mode-in-vue-vite-application%2F&linkname=Implement%20Light%2FDark%20mode%20in%20Vue%20Vite%20application)[](https://www.addtoany.com/add_to/linkedin?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fimplement-light-dark-mode-in-vue-vite-application%2F&linkname=Implement%20Light%2FDark%20mode%20in%20Vue%20Vite%20application)[](https://www.addtoany.com/add_to/copy_link?linkurl=https%3A%2F%2Fblog.codedthemes.com%2Fimplement-light-dark-mode-in-vue-vite-application%2F&linkname=Implement%20Light%2FDark%20mode%20in%20Vue%20Vite%20application)