https://github.com/howbizarre/vue-tailwindcss-dark-theme-switcher
Very basic and simple dark theme switcher using some plain Javascript, Vue 3 and Tailwindcss.
https://github.com/howbizarre/vue-tailwindcss-dark-theme-switcher
dark javascript switcher tailwindcss theme typescript vue
Last synced: about 2 months ago
JSON representation
Very basic and simple dark theme switcher using some plain Javascript, Vue 3 and Tailwindcss.
- Host: GitHub
- URL: https://github.com/howbizarre/vue-tailwindcss-dark-theme-switcher
- Owner: howbizarre
- Created: 2023-01-04T12:15:13.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-11-07T08:27:16.000Z (over 2 years ago)
- Last Synced: 2026-01-03T15:30:20.181Z (5 months ago)
- Topics: dark, javascript, switcher, tailwindcss, theme, typescript, vue
- Language: HTML
- Homepage: https://bizarre.how/dark/
- Size: 108 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](https://vuejs.org/guide/quick-start.html#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](https://tailwindcss.com/docs/guides/vite#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](https://github.com/howbizarre/vue-tailwindcss-dark-theme-switcher/blob/master/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](https://github.com/howbizarre/vue-tailwindcss-dark-theme-switcher/blob/master/src/App.vue) from repository
## Demo
You can see how it works at my [GitHub page](https://bizarre.how/)
Or on the [demo page](https://bizarre.how/dark/)
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```