A simple and interactive counter application with light/dark theme switching built using HTML, CSS, and Vanilla JavaScript.
This project demonstrates fundamental frontend concepts including:
- State management
- DOM manipulation
- Event handling
- Conditional logic
- Theme switching using CSS variables
It focuses on clean structure and modular logic rather than visual complexity.
| Feature | Description |
|---|---|
| ➕ Increment | Increase counter value |
| ➖ Decrement | Decrease counter value (no negative values) |
| 🔄 Reset | Reset counter to zero |
| 🌗 Theme Toggle | Switch between light and dark mode |
| 🎨 CSS Variables | Theme handled using custom properties |
| 📱 Responsive Layout | Centered layout across devices |
| Technology | Usage |
|---|---|
| HTML5 | Structure |
| CSS3 | Styling & theme variables |
| JavaScript | Logic & state management |
- Managing application state using a JavaScript variable
- Updating UI using a dedicated render function
- Preventing invalid state (no negative counter)
- Toggling CSS classes for theme switching
- Using CSS variables for scalable theming
counter-theme-toggle/ │ ├── index.html ├── style.css ├── script.js └── output/ ├── light-mode.png └── dark-mode.png
The counter value is stored in a count variable and updated through event listeners.
The decrement function checks if the counter is greater than zero before decreasing.
A dark class is toggled on the <body> element, and CSS variables update colors dynamically.
They allow centralized theme control and scalable design adjustments.
- Store theme preference in localStorage
- Add animated counter transitions
- Add input-based counter mode
- Convert into reusable component (React)
Rajeev Ranjan Singh
Frontend Developer
⭐ If you found this project useful, consider giving it a star.