https://github.com/mohammadzaid07/theme-switcher
A simple app to demonstrate Dark/Light mode toggle
https://github.com/mohammadzaid07/theme-switcher
react react-context-api tailwind-dark-mode
Last synced: 5 months ago
JSON representation
A simple app to demonstrate Dark/Light mode toggle
- Host: GitHub
- URL: https://github.com/mohammadzaid07/theme-switcher
- Owner: mohammadzaid07
- Created: 2025-05-31T13:33:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-05-31T15:23:23.000Z (7 months ago)
- Last Synced: 2025-06-01T03:41:53.683Z (7 months ago)
- Topics: react, react-context-api, tailwind-dark-mode
- Language: JavaScript
- Homepage: https://mohammadzaid07.github.io/theme-switcher/
- Size: 121 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎨 Theme Switcher App (Dark/Light Mode)
A simple React application that demonstrates how to implement **theme switching (light/dark)** using **React Context API** and **Tailwind CSS**.
## 🌐 Live Demo
🔗 [Click here to try it out](https://mohammadzaid07.github.io/theme-switcher/)
## 🚀 Features
- ⚛️ Built with React + Vite
- 🌗 Light/Dark mode switch
- 🎨 Uses Tailwind CSS’s dark mode classes
- 🧠 Global theme state managed via React Context API
## 🛠️ Tech Stack
- React
- Tailwind CSS
- React Context API
- Vite
## 💡 How It Works
1. The current theme (`light` or `dark`) is stored in a React state.
2. Theme context provides `lightTheme` and `darkTheme` functions globally.
3. A `useEffect` hook updates the `html` tag's class based on the selected theme.
4. Tailwind's dark mode styles respond accordingly.
## 🎛️ Components
- **ThemeBtn**: A toggle button that switches between light and dark mode.
- **Card**: A sample card to demonstrate how styles adapt to the selected theme.