Dark Theme Switcher with Vue 3 and Tailwindcss

Very basic and simple dark theme switcher using some plain Javascript, Vue 3 and Tailwindcss.

In 4 simple steps

1. Install Vue 3

Just follow the instruction from Vue's official documentation - Creating a Vue Application.

2. Add Tailwindcss

Use official documentation on the Tailwindcss website but start from point 2 (Install Tailwind CSS) - Install Tailwind CSS with Vite Using Vue.

3. Add theme switcher

I will add it to the index.html file to visualize its usage. I leave it to you to find the most convenient way to use it in your project.

See the index.html from repository

4. Add test content

I have added the contents of the App.vue to test the functionality.

See the src/App.vue from repository

Demo

You can see how it works at my GitHub page Or on the demo page

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Type-Check, Compile and Minify for Production

npm run build