Skip to content

[FEAT] Add dark/light theme toggle on public profile page #964

@Priyanshu-byte-coder

Description

@Priyanshu-byte-coder

Problem Statement

The public profile page (/u/<username>) inherits the visitor's system theme preference via the layout's theme detection script. However, there is no way for a visitor to toggle the theme manually without changing their OS settings.

Proposed Solution

Add a small theme toggle button in the public profile page header (sun/moon icon). Clicking it toggles between light and dark mode, persisted in localStorage for the visitor.

Alternatives Considered

  • System preference only: Already implemented — this is additive
  • No toggle on public pages: Limiting for visitors who want dark mode on a light-mode OS

Acceptance Criteria

  • Sun/moon toggle button in the top-right of the public profile header
  • Clicking toggles dark class on <html> and saves to localStorage
  • On re-visit, the saved preference is respected
  • Works without logging in (pure client-side)

Tech Context

The theme toggle logic already exists for the dashboard (in the layout's inline script). Extract it to a ThemeToggle component and reuse it on the public profile page.

Additional Context

This is a small, self-contained feature — perfect for a beginner contributor.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestlevel:beginnerGSSoC: Beginner difficulty (20 pts)needs-triageNeeds maintainer triagetype:featureGSSoC type bonus: new feature

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions