[WEBDEV] TASK-04: Add Dark Mode with Save Preference

[MishtiGarg250]

Objective

Implement a Dark/Light mode toggle that:

• Change the UI theme
• Persists user preference
• Automatically restores the saved theme on page reload

What will you learn

• How to manage UI state without libraries
• Using CSS variables for scalable theming
• Persisting preferences using localStorage
• Applying saved state on page load
• Thinking in terms of state → UI → storage

Task Description

You are given a basic webpage with starter files.
Your job is to:

• Add a toggle button to switch between Light and Dark mode
• Implement theme changes using CSS variables
• Save the user’s selected theme in localStorage
• Read and apply the saved theme automatically when the page reloads

Rules & Constraints

• Use Vanilla JavaScript only
• Use CSS variables for color management
• Use localStorage for saving preference
• Do not use:

• Frameworks (React, Vue, etc.)
• UI libraries
• External packages

Where to work

webdev/contributors/name/task-04/
Files include

• index.html
• style.css
• 'script.js`
• explanation.md

NOTE: CHECK OUT THE STARTER FILES , THERE YOU SEE THE STARTER FILES AS WELL AS TODO TASKS IN SCRIPT.JS

Expected Behavior

Your solution should:

• Toggle theme instantly on button click
• Update all colors using CSS variables
• Save the selected theme to localStorage
• Restore the correct theme on page reload
• Work without console errors

Submission Guidelines

• Screen Recording of the behavior
• Do not change the folder structure
• Do not hardcode colors in JavaScript
• Keep code readable and well-commented
• Follow the existing TODOs
• Ensure the feature works on refresh