Project 5/20
🌓 A responsive single-page website that allows users to switch between light and dark themes dynamically, with visual transitions and themed illustrations.
- ✅ Toggle between light and dark themes
- ✅ Navigation and content section adapts to selected theme
- ✅ Images switch dynamically to match the theme
- ✅ Theme preference saved in localStorage
- ✅ Stylish animated toggle switch
- HTML5
- CSS3
- Vanilla JavaScript
- LocalStorage
- How to implement dark/light theme toggling using JavaScript
- How to store user preferences with
localStorage - Dynamically changing images and styles based on theme
- Working with CSS variables for easy theme management
🚀 For me, this project was more about practice and gaining additional experience,
rather than learning something entirely new.👨💻 Since I’m not a beginner and already familiar with these technologies,
I approached it with confidence — and still, I truly enjoyed working on it.🎯 Overall, I consider this a very valuable and enjoyable experience.
- Joke Teller | [Project 4/20] → View Repository
- Animated Template | [Project 6/20] → View Repository
- Google Fonts – Huge library of customizable web-safe fonts.
- FontAwesome Icons – Free and premium icon library for modern UIs.
- Hero Patterns – A collection of free, repeatable SVG background patterns.
- Undraw Illustrations – Open-source vector illustrations that adapt to your theme.
- W3Schools - Switch – Tutorial to build an animated toggle switch.
- W3Schools - Change Event – Learn how to handle input and switch toggles in JS.
- MDN - CSS Variables – How to define and use custom properties in CSS.
- MDN - Document Element – Reference to access and modify the root element of the document.
- Dark Mode Colors How-to Article – Best practices for designing dark themes with readability in mind.
🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀