Implemented a production-ready global dark mode system for the DevPath application

[DelacroixAD]

Summary [required]

Implemented a production-ready global dark mode system across the DevPath application with accessibility and responsive support. The update includes persistent theme storage using localStorage, automatic OS theme detection via prefers-color-scheme, smooth theme transitions, improved dark mode contrast, and accessible toggle controls for both desktop and mobile navigation.

Related Issue [required]

Closes #106

Type of Change [required]

• Bug fix — resolves a broken behaviour
• [x ] Feature — adds new functionality
• Data — adds new projects to data/projects.json
• Documentation — updates docs, README, or code comments only
• [ x] Style — CSS or visual changes only, no logic change
• Refactor — restructures code without changing behaviour
• Test — adds or updates tests

What Was Changed [required]

File	Change made
static/style.css	Added global dark mode theme variables, transitions, responsive styling, and improved dark mode contrast fixes
static/script.js	Added theme initialization, localStorage persistence, OS theme detection, aria-pressed handling, and theme toggle logic
templates/index.html	Added accessible dark mode toggle button to desktop and mobile navigation
templates/project.html	Added dark mode toggle support and responsive accessibility improvements
templates/404.html	Added anti-flash theme initialization script before stylesheet load

How to Test This PR [required]

1. Clone this branch: git checkout your-branch-name
2. Install dependencies: pip install -r requirements.txt
3. Run the app: python app.py
4. Open http://127.0.0.1:5000 and...
5. Run the tests: python tests/test_basic.py

Expected test output:

27 passed, 0 failed out of 27 tests

Test Results [required]

PASS  test_projects_json_loads
  PASS  test_each_project_has_required_fields
  PASS  test_find_project_by_id_found
  PASS  test_find_project_by_id_missing
  PASS  test_parse_skills_basic
  PASS  test_parse_skills_empty_string
  PASS  test_parse_skills_single_entry
  PASS  test_score_single_project_full_match
  PASS  test_score_single_project_no_match
  PASS  test_get_recommendations_returns_results
  PASS  test_get_recommendations_max_three
  PASS  test_get_recommendations_no_match_returns_empty
  PASS  test_get_recommendations_result_format
  PASS  test_validate_all_valid
  PASS  test_validate_missing_skills
  PASS  test_validate_missing_level
  PASS  test_validate_missing_interest
  PASS  test_validate_missing_time
  PASS  test_validate_all_missing
  PASS  test_home_route
  PASS  test_recommend_api_valid
  PASS  test_recommend_api_missing_field
  PASS  test_recommend_api_empty_body
  PASS  test_project_detail_found
  PASS  test_project_detail_not_found
  PASS  test_view_code_found
  PASS  test_download_code_found

27 passed, 0 failed out of 27 tests

Screenshots (if UI change)

Homepage - Light Mode

Homepage - Dark Mode

Mobile Navbar

Project Detail Page

Self-Review Checklist [required]

• I have read CONTRIBUTING.md and followed all guidelines
• My branch name follows the convention: feat/, fix/, docs/, data/, style/, test/
• I have run python tests/test_basic.py and all 27 tests pass
• I have run flake8 . locally and there are no errors
• I have not introduced any print() or console.log() debug statements
• Every new function I wrote has a docstring
• 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)
• If I added a project to the dataset, it has all required JSON fields

Notes for Reviewer

Focused on keeping the implementation minimal and compatible with the existing Flask structure while improving accessibility, responsiveness, and dark mode readability.

[vercel]

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

[Copilot]

Pull request overview

Adds a global dark-mode system to the Flask-based DevPath site: a synchronous anti-FOUC bootstrap in each template, persistent localStorage preference with prefers-color-scheme fallback, accessible desktop + mobile toggle buttons, dark-mode CSS variable overrides, and component-specific contrast adjustments.

Changes:

• Introduce html[data-theme="dark"] variable overrides plus component-specific dark-mode rules and a toggle-button style in static/style.css.
• Add a self-contained theme engine (initTheme/applyTheme, delegated click handler, screen-reader announcement region) to static/script.js, plus aria-expanded polish on the mobile-nav handler.
• Add accessible toggle buttons (desktop + mobile) and a duplicated anti-FOUC inline script to templates/index.html, templates/project.html, and templates/404.html; project.html also gains the previously missing mobile menu.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
static/style.css	Dark-mode variable theme + toggle button styles + per-component dark overrides; contains an unclosed comment that breaks the toggle styling and the promised smooth-transition rule, plus unreadable .hvc-title/.hvc-sub overrides.
static/script.js	New theme engine with persistence and ARIA syncing; references a .theme-ready class that has no CSS counterpart.
templates/index.html	Adds anti-FOUC script, desktop + mobile theme toggles, and aria-* on nav; mobile toggle inherits nav-mobile-link so the menu auto-closes on click.
templates/project.html	Adds anti-FOUC script, mobile menu, and desktop/mobile theme toggles; same mobile auto-close issue and duplicated inline script.
templates/404.html	Adds anti-FOUC script and desktop theme toggle to the 404 navbar.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[komalharshita]

@DelacroixAD do resolve the merge conflicts before merging

[DelacroixAD]

@komalharshita Merge conflicts have been resolved and the branch has been updated. Please review when convenient. Thank you!