https://github.com/dalascript/light-and-dark-mode
ZTM JS Web Projects Course | Light & Dark Mode | Project 5/20
https://github.com/dalascript/light-and-dark-mode
css html javascript light-and-dark-mode zerotomastery
Last synced: 6 months ago
JSON representation
ZTM JS Web Projects Course | Light & Dark Mode | Project 5/20
- Host: GitHub
- URL: https://github.com/dalascript/light-and-dark-mode
- Owner: DalaScript
- Created: 2025-05-19T14:29:50.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-31T09:42:47.000Z (6 months ago)
- Last Synced: 2025-08-31T11:33:41.594Z (6 months ago)
- Topics: css, html, javascript, light-and-dark-mode, zerotomastery
- Language: CSS
- Homepage: https://dalascript.github.io/light-and-dark-mode/
- Size: 639 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Light & Dark Mode | ZTM JS Web Projects Course
**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.
---
## 📚 Table of Contents
- [🔎 Overview](#-overview)
- [📸 Screenshot](#-screenshot)
- [🔗 Links](#-links)
- [📌 Features](#-features)
- [🛠️ Built with](#️-built-with)
- [🧠 My process](#-my-process)
- [🗃️ Useful resources](#️-useful-resources)
- [🔙 Previous Project](#-previous-project)
- [🔜 Next Project](#-next-project)
- [👤 Author](#-author)
- [🌐 Connect with Me](#-connect-with-me)
- [💻 Coding Profiles](#-coding-profiles)
---
## 🔎 Overview
### 📸 Screenshot
### 🔗 Links
- [🔴 Live Demo](https://dalascript.github.io/light-and-dark-mode/)
- [🗂️ GitHub Repository](https://github.com/DalaScript/light-and-dark-mode)
### 📌 Features
- ✅ 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
### 🛠️ Built with
- HTML5
- CSS3
- Vanilla JavaScript
- LocalStorage
---
## 🧠 My Process
### 🗃️ Useful resources
- [Google Fonts](https://fonts.google.com/)
- [FontAwesome Icons](https://fontawesome.com/icons?d=gallery&q=close&m=free)
- [Hero Patterns](https://heropatterns.com/)
- [Undraw Illustrations](https://undraw.co/illustrations)
- [W3Schools - Switch](https://www.w3schools.com/howto/howto_css_switch.asp)
- [W3Schools - Change Event](https://www.w3schools.com/jsref/event_onchange.asp)
- [MDN - CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)
- [MDN - Document Element](https://developer.mozilla.org/en-US/docs/Web/API/Document/documentElement)
- [Dark Mode Colors How-to Article](https://blog.prototypr.io/how-to-design-a-dark-theme-for-your-android-app-3daeb264637)
### 🔙 Previous Project
- Joke Teller | *Project 4/20* → [View Repository](https://github.com/DalaScript/joke-teller)
### 🔜 Next Project
- Animated Template | *Project 6/20* → [View Repository](https://github.com/DalaScript/animated-template)
---
## 👤 Author
### 🌐 Connect with Me
- [Instagram](https://www.instagram.com/DalaScript)
- [YouTube](https://www.youtube.com/@DalaScript)
### 💻 Coding Profiles
- [freeCodeCamp](https://www.freecodecamp.org/DalaScript)
- [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)
- [GitHub](https://github.com/DalaScript)
*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*