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!

[komalharshita]

@DelacroixAD resolve the merge conflicts

[DelacroixAD]

@komalharshita The merge conflicts have been resolved again and the branch has been updated. Since the main branch is changing frequently, new conflicts may reappear if the PR stays open for too long. Kindly review and merge when possible. Thank you!

[komalharshita]

This is a substantial and promising contribution. The effort put into implementing a global dark mode system across the DevPath UI is clearly visible, and the screenshots show thoughtful work across desktop and mobile layouts.

The overall visual direction is strong:

• branding is mostly preserved
• dark surfaces are reasonably cohesive
• multiple shared components were adapted consistently
• mobile navigation support was considered

However, because this PR affects global styling and shared UI architecture, it requires a much stricter review standard before merge.

Current blockers:

• the PR has unresolved merge conflicts
• global CSS/theme changes need maintainability review
• accessibility contrast and focus-state visibility need validation
• theme persistence/system preference behavior is not clearly demonstrated
• we need to ensure the implementation uses reusable theme variables/tokens instead of scattered hardcoded color overrides

Dark mode touches nearly every shared component in the application, so regressions here can impact the entire project if merged prematurely.

Before this can be approved, please:

• resolve all merge conflicts cleanly against latest main
• verify responsive behavior across major breakpoints
• validate accessibility contrast/readability
• confirm persistent theme handling
• ensure the theme system remains maintainable and scalable

Once those are addressed, this can be re-reviewed carefully.

[Xenon010101]

Here's how to address all 7 Copilot review comments:

1. Duplicated theme code across 3 templates (index.html, project.html, error templates)
Extract the theme init script and toggle markup into a partial (templates/_theme_init.html and templates/_theme_toggle.html) and {% include %} them.

2. Mobile theme toggle collapses the menu (templates/index.html + script.js)
Remove nav-mobile-link class from the mobile theme toggle button, or exclude .theme-toggle from the auto-close handler:

document.querySelectorAll('.nav-mobile-link:not(.theme-toggle)').forEach(...)

3. Same issue on project.html (templates/project.html)
Same fix as #2.

4. Inline styles on mobile toggle (templates/index.html + project.html)
Move style declarations into a CSS class:

.nav-mobile-link.theme-toggle {
  background: none; border: none; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 0; font-size: 0.95rem; font-weight: 500;
}

5. CSS ::before label not accessible (static/style.css)
Toggle visible text via JavaScript alongside aria-label instead of relying on CSS generated content.

6. .theme-ready class has no matching CSS rule
Either add the transition rule that was intended:

.theme-ready * { transition: background-color 0.3s, color 0.3s, border-color 0.3s; }

Or remove the dead .theme-ready code from script.js.

7. No matchMedia change listener (static/script.js)
Optionally subscribe to OS theme changes when user has no saved preference:

var mq = window.matchMedia('(prefers-color-scheme: dark)');
mq.addEventListener('change', function(e) {
  if (!localStorage.getItem('devpath-theme')) {
    applyTheme(e.matches ? 'dark' : 'light');
  }
});

[komalharshita]

Thanks for addressing the review feedback.

I performed a full re-review of the updated PR. The primary blocker from the previous review has been resolved: both starter_code files now contain actual executable starter implementations rather than primarily documentation-style content.

Verified improvements:

• movie_recommender.py now includes dataset loading, preprocessing, similarity calculation, recommendation logic, and runnable CLI flow.
• sentiment_app.py now includes a working Flask scaffold, sample training data, vectorization, model training, prediction logic, and a runnable web interface.
• TODO guidance has been added appropriately for future expansion.
• Project descriptions, roadmaps, and resources have been improved.
• Merge conflicts have been resolved and the scope remains aligned with Issue #68.

There are still some areas that could be improved in future contributions (resource specificity, difficulty calibration, and template-based Flask structure), but they are not significant enough to block this contribution.

Approved. Thank you for incorporating the requested changes.