Added dark mode feature #206

[Shashankpanchwatkar]

Summary

Added a dark mode feature with a theme toggle button in the navbar. Implemented persistent theme switching using localStorage and updated multiple sections of the website to support a consistent dark UI experience.

Related Issue

Closes #108

Type of Change

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

What Was Changed

File	Change made
templates/index.html	Added dark mode toggle button in navbar
static/style.css	Added dark mode styles for sections, cards, forms, footer, and buttons
static/script.js	Added theme toggle functionality with localStorage support

How to Test This PR

1. Clone this branch:
   git checkout dark-mode-feature

2. Install dependencies:
   pip install -r requirements.txt

3. Run the app:
   python app.py

4. Open:
   http://127.0.0.1:5000

5. Click the Dark/Light toggle button in the navbar.

6. Verify:

   • Theme switches correctly
   • Dark mode persists after refresh
   • UI remains responsive on desktop and mobile

Test Results

Application tested successfully in browser.
Dark mode toggle working correctly.
Theme persistence verified using localStorage.

[vercel]

@Shashankpanchwatkar 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.

[github-actions]

Thank you for submitting your first pull request to DevPath.

Before review:

• Complete the PR template fully
• Ensure all tests pass
• Link your PR to an issue
• Keep changes scoped to the issue

A maintainer will review your contribution soon.

[komalharshita]

@Shashankpanchwatkar kindly resolve the merge conflicts

[Shashankpanchwatkar]

Hi maintainers, the deployment for commit d3062df on PR #207 is awaiting authorization. I don’t have sufficient permissions to approve it. Could someone with Member access please authorize the deployment? Thank you.

[komalharshita]

Thanks for working on a global dark mode system for DevPath — this is a valuable feature and the overall direction is good. However, after a detailed review, there are several important issues that need to be addressed before this can be merged.

Blocking issues

• The PR introduces duplicate skills-input elements with the same ID, which can break DOM behavior and accessibility.
• Existing accessibility attributes (aria-haspopup, aria-expanded, aria-controls) were removed from the original input.
• The dark mode JS assumes #theme-toggle exists on all pages and can throw runtime errors if the element is missing.

Additional concerns
innerHTML is being used where textContent would be safer and cleaner.
The toggle button is missing accessibility state attributes like aria-label and aria-pressed.
The PR contains a large amount of unrelated formatting/whitespace changes, which increases review difficulty and merge conflict risk.
Dark mode currently does not respect prefers-color-scheme.
This feature should be manually tested across desktop/mobile views and all major UI sections before merge.

Please address the above issues and update the PR with cleaned, scoped changes and verified UI testing.

[komalharshita]

closing this PR for inactivity