Skip to content

Add theme toggle to landing page nav#1259

Open
PARNITA-SINGH wants to merge 1 commit into
komalharshita:mainfrom
PARNITA-SINGH:fix/theme-toggle-missing-landing-page
Open

Add theme toggle to landing page nav#1259
PARNITA-SINGH wants to merge 1 commit into
komalharshita:mainfrom
PARNITA-SINGH:fix/theme-toggle-missing-landing-page

Conversation

@PARNITA-SINGH

Copy link
Copy Markdown

Summary [required]

The light/dark mode toggle button was only visible on the individual project detail page . It was completely absent from the main landing/search page and any other pages, making the theme preference inaccessible to users who haven't navigated into a specific project and so this pull request resolves the issue and now the light/dark toggle button is visible on the landing/search page.

Related Issue #1227

Closes #1227

Type of Change

  • Bug fix — resolves a broken behaviour
  • Feature — adds new functionality
  • Style — CSS or visual changes only, no logic change
  • Refactor — restructures code without changing behaviour
  • Test — adds or updates tests

What Was Changed [required]

The Issue was in the Index.html present in the src/templates folder, the actual fix is adds the toggle button + wraps it in a .nav-links div (matching project.html's pattern), so it inherits the same flex spacing from style.css.
One more bug was present in the file the

was closed with instead of since it adjacent and touches the same lines too.

File Change made
src/templates/index.html Added {% include 'partials/theme_toggle.html' %} inside a new .nav-links div in the desktop nav, so the toggle renders on the landing page (matching project.html's pattern)
src/templates/index.html Fixed an unrelated pre-existing bug in the same section: the search <form> was incorrectly closed with </div> instead of </form>

How to Test This PR

  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 confirm the light/dark toggle button now appears in the top nav on the landing page (previously only visible on a project detail page). Click it and confirm the theme switches and persists on refresh.
  5. Run the tests: python tests/test_basic.py

Expected test output:

27 passed, 0 failed out of 27 tests

Test Results

FAIL test_projects_json_loads: name '_URL_RE' is not defined
PASS test_duplicate_ids_detected
PASS test_duplicate_titles_detected
PASS test_empty_title_detected
PASS test_missing_required_field_detected
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_parse_skills_valid_json_array
PASS test_parse_skills_malformed_json_handling
PASS test_parse_skills_legacy_fallback
PASS test_parse_skills_containing_commas
PASS test_score_single_project_full_match
PASS test_score_single_project_partial_skill_coverage
FAIL test_score_coverage_ratio_exact_values: test_score_coverage_ratio_exact_values() missing 1 required positional argument: 'monkeypatch'
PASS test_score_no_project_skills_does_not_crash
PASS test_score_three_skills_partial_coverage
PASS test_score_single_project_no_match
PASS test_score_single_project_alias_matching
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_case_insensitive_recommendations_identical
PASS test_whitespace_stripped_in_skills
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_security_headers_present
PASS test_recommend_api_valid
PASS test_recommend_api_interest_not_available
PASS test_recommend_api_missing_field
PASS test_recommend_api_null_field
PASS test_recommend_api_non_string_field
PASS test_recommend_api_empty_body
PASS test_project_detail_found
[2026-07-03 22:52:59] ERROR devpath.errors status=404 id=3614e8d9 type=NotFound context='page_not_found'
Traceback (most recent call last):
File "C:\Users\asus\AppData\Roaming\Python\Python314\site-packages\flask\app.py", line 880, in full_dispatch_request
rv = self.dispatch_request()
File "C:\Users\asus\AppData\Roaming\Python\Python314\site-packages\flask\app.py", line 865, in dispatch_request
return self.ensure_sync(self.view_functions[rule.endpoint])(**view_args) # type: ignore[no-any-return]
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^
File "C:\Users\asus\Desktop\dev\DevPath-Parnita-Singh\src\routes\main_routes.py", line 209, in project_detail
abort(404)
~~~~~^^^^^
File "C:\Users\asus\AppData\Roaming\Python\Python314\site-packages\flask\helpers.py", line 272, in abort
current_app.aborter(code, *args, **kwargs)
~~~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^
File "C:\Users\asus\AppData\Roaming\Python\Python314\site-packages\werkzeug\exceptions.py", line 887, in call
raise self.mapping[code](*args, **kwargs)
werkzeug.exceptions.NotFound: 404 Not Found: The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.

PASS test_project_detail_not_found
[2026-07-03 22:52:59] ERROR devpath.errors status=500 id=fef602af type=Exception context='internal_server_error'
Exception: Test error

PASS test_internal_server_error_page
PASS test_view_code_found
PASS test_download_code_found
PASS test_view_code_nested_path
PASS test_download_code_nested_path
PASS test_resolve_starter_file_path_traversal
PASS test_health_check
PASS test_scoring_weights_has_all_keys
PASS test_search_api_returns_results
PASS test_search_api_empty_query
PASS test_home_route_with_share_params
PASS test_share_banner_element_exists
PASS test_share_params_partial_loads_ok
PASS test_share_params_invalid_level_not_reflected
PASS test_share_params_xss_not_reflected
PASS test_share_params_excessive_skills_loads_ok
PASS test_api_recommend_invalid_level_no_crash
PASS test_sitemap_returns_200
PASS test_sitemap_content_type
PASS test_sitemap_contains_homepage
PASS test_sitemap_contains_all_project_ids
PASS test_robots_txt_returns_200
PASS test_robots_txt_references_sitemap
PASS test_project_links_have_noopener
PASS test_career_roadmaps_load
PASS test_compare_roadmaps_finds_overlap
PASS test_compare_same_roadmap_returns_error
PASS test_compare_invalid_roadmap_returns_none
PASS test_compare_page_route
PASS test_list_roadmaps_api
PASS test_compare_api
PASS test_compare_api_missing_params
PASS test_compare_api_not_found
PASS test_sitemap_includes_compare

76 passed, 2 failed out of 78 tests

Screenshots

AFTER
image

BEFORE
image

Self-Review Checklist

  • 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 (pre-existing lint issues in unrelated .py files — none introduced by this PR, which only touches index.html)
  • 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

Running flake8 . on the full repo surfaces a large number of pre-existing lint warnings across .py files (routes, utils, tests, scripts) — these are unrelated to this PR, which only modifies src/templates/index.html. Happy to open a separate cleanup issue for these if useful.

-python tests/test_basic.py shows 76 passed, 2 failed. Both failures are pre-existing bugs unrelated to this change (an undefined _URL_RE name in url_validator.py, and a test missing a monkeypatch argument). This PR only touches src/templates/index.html.

@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

@PARNITA-SINGH 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 github-actions Bot added gssoc-2026 type:bug Something isn't working labels Jul 3, 2026

@github-actions github-actions Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@PARNITA-SINGH

Copy link
Copy Markdown
Author

@komalharshita Hey, The PR is ready and it resolves a very Important issue please merge the PR and do give if any reviews
thank you

@komalharshita komalharshita added the need review Further information is requested label Jul 17, 2026
@komalharshita

Copy link
Copy Markdown
Owner

Thanks for the contribution! The feature itself looks useful, but I have a couple of requests before this can be merged.

  • Please resolve the current merge conflicts with the latest main branch.
  • This PR also includes an unrelated fix for the incorrect closing </form> tag. Since the primary goal of this PR is adding the theme toggle, I'd recommend keeping the changes focused by either moving the HTML fix into a separate PR or clearly explaining why it's required for this change.

Once the conflicts are resolved and the scope is clarified, I'd be happy to review it again.

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

Labels

gssoc-2026 need review Further information is requested type:bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Add Light/Dark Mode Toggle to All Pages (Currently Only on Project Detail Page)

2 participants