What the goal is
Add a simple dark-mode toggle example to the HTML code examples in this repo.
This enhancement should illustrate how beginners can implement a dark/light theme switch using basic CSS + JavaScript.
Why this matters
Beginners often want to see theme toggles in real web pages. This example will help learners grasp:
- CSS custom properties (variables)
- JavaScript event handling
- DOM class toggling
Files / folders you might work with
Check these directories for example pages:
Look inside subfolders such as getting-started, introduction-to-css, etc.
Match the style of existing examples — keep it simple and instructive.
(MDN Learning Area examples mirror the actual Learn content structure):contentReference[oaicite:1]{index=1}
Requirements
✅ Dark mode toggle must:
- Be JavaScript-free if possible (CSS only) or use plain JS
- Work on at least one example HTML page
- Include a visible switch or button
- Not break the original light mode
✅ Keep the code easy to understand for beginners.
Add comments where helpful.
What a “done” version looks like
- A working example HTML file with dark/light theme toggle
- CSS and JS code added (if needed)
- A short note in the example explaining how it works
Difficulty level
✔ Beginner-friendly / Great first issue
If you’re unsure where to start, comment here first!
What the goal is
Add a simple dark-mode toggle example to the HTML code examples in this repo.
This enhancement should illustrate how beginners can implement a dark/light theme switch using basic CSS + JavaScript.
Why this matters
Beginners often want to see theme toggles in real web pages. This example will help learners grasp:
Files / folders you might work with
Check these directories for example pages:
html/css/javascript/Look inside subfolders such as
getting-started,introduction-to-css, etc.Match the style of existing examples — keep it simple and instructive.
(MDN Learning Area examples mirror the actual Learn content structure):contentReference[oaicite:1]{index=1}
Requirements
✅ Dark mode toggle must:
✅ Keep the code easy to understand for beginners.
Add comments where helpful.
What a “done” version looks like
Difficulty level
✔ Beginner-friendly / Great first issue
If you’re unsure where to start, comment here first!