An elegant and responsive Website Header with Dark/Light Mode Toggle built using React, Vite, and Tailwind CSS v4.
This project demonstrates seamless theme switching, persistent user preference using localStorage, and a modern hero section UI.
🔗 Live Demo: https://hsb-ini-14.github.io/website-header-dark-light-toggle/
- 🌗 Dark & Light mode toggle button
- 💾 Remembers theme preference using
localStorage - 🖥️ Respects system color scheme on first load
- ⚡ Smooth transition animations between themes
- 🎨 Modern hero section UI with gradients and blur effects
- 📱 Fully responsive layout
- 🎯 Built using Tailwind CSS v4
- 🚀 Fast development using Vite
- React – UI components & state management
- Vite – Fast build tool & dev server
- Tailwind CSS v4 – Utility-first styling
- Boxicons – Icon set
- GitHub Pages – Deployment
website-header-dark-light-toggle/
├── src/
│ ├── components/
│ │ └── Hero.jsx
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── public/
│ └── images/
├── vite.config.js
├── package.json
└── README.md
Follow these steps to run the project locally:
git clone https://github.com/hsb-ini-14/website-header-dark-light-toggle.git
cd website-header-dark-light-togglenpm installnpm run devOpen your browser and visit:
http://localhost:5173
This project is deployed using gh-pages.
- Install gh-pages
npm install --save-dev gh-pages- Set base path in
vite.config.js
export default defineConfig({
base: "/website-header-dark-light-toggle/",
});- Add scripts to
package.json
"predeploy": "npm run build",
"deploy": "gh-pages -d dist"- Deploy
npm run deploy- The theme state is stored using React
useState - On initial load:
- Checks
localStoragefor saved theme - Falls back to system preference using
prefers-color-scheme
- Checks
- Toggles the
darkclass on the<html>element - Saves updated theme back to
localStorage - Tailwind’s
dark:utilities handle theme-based styling - UI transitions are handled using Tailwind transition classes
to be added later
- Icons by Boxicons
- Styling powered by Tailwind CSS
- Build tool by Vite
Harsh Singh Bhaduria
- GitHub: https://github.com/hsb-ini-14
If you like this project, consider giving it a ⭐ on GitHub — it really helps!