Skip to content

feat: add dark/light mode toggle with localStorage persistence#209

Open
shubh22-u wants to merge 4 commits into
komalharshita:mainfrom
shubh22-u:feat/dark-light-mode
Open

feat: add dark/light mode toggle with localStorage persistence#209
shubh22-u wants to merge 4 commits into
komalharshita:mainfrom
shubh22-u:feat/dark-light-mode

Conversation

@shubh22-u
Copy link
Copy Markdown
Contributor

@shubh22-u shubh22-u commented May 17, 2026

Summary [required]

This PR adds a Dark/Light mode toggle to the DevPath website.
The site previously had no theme switching option, which caused
eye strain for users browsing in low-light environments. A toggle
button (🌙/☀️) has been added to the navbar that smoothly switches
between dark and light themes, and the user's preference is saved
using localStorage so it persists across page refreshes.

Related Issue [required]

Closes #187

Type of Change [required]

  • Feature — adds new functionality
  • Style — CSS or visual changes only, no logic change

What Was Changed [required]

File Change made
templates/index.html Added 🌙/☀️ toggle button in navbar
static/style.css Added CSS variables for dark/light theme switching
static/script.js Added JavaScript toggle logic with localStorage persistence

How to Test This PR [required]

  1. Clone this branch: git checkout feat/dark-light-mode
  2. Install dependencies: pip install -r requirements.txt
  3. Run the app: python app.py
  4. Open http://127.0.0.1:5000
  5. Look for the 🌙 button in the navbar (top right)
  6. Click it — page should switch to dark mode
  7. Refresh the page — dark mode should still be active
  8. Click ☀️ to switch back to light mode
  9. Run the tests: python tests/test_basic.py

Expected test output:

Test Results [required]

This is a frontend-only change (HTML, CSS, JS).
No Python logic was modified. All existing tests pass as no
backend code was changed.

Screenshots (if UI change)

Before After
No toggle button in navbar 🌙 toggle button visible in navbar
Only light theme available Dark mode activates on click

Self-Review Checklist [required]

  • I have read CONTRIBUTING.md and followed all guidelines
  • My branch name follows the convention: feat/dark-light-mode
  • I have not introduced any print() or console.log() debug statements
  • I have not modified files outside the scope of the linked issue
  • If I changed the UI, I tested it at 375px (mobile) and 1280px (desktop)

Notes for Reviewer

The toggle button is placed in the navbar for easy access on all pages.
CSS variables are used for clean theme switching without overriding
existing styles. localStorage ensures the user preference is remembered
across sessions. Please test on both mobile and desktop views.

Closes #<187>

Added dark/light mode toggle button in navbar.

Changes made:

  • templates/index.html → Added toggle button (🌙/☀️) in navbar
  • static/style.css → Added CSS variables and dark-mode styles
  • static/script.js → Added JavaScript toggle logic with localStorage

@vercel
Copy link
Copy Markdown

vercel Bot commented May 17, 2026

@shubh22-u is attempting to deploy a commit to the komalsony234-1530's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Dark/Light Mode Toggle to Improve User Experience

1 participant