Skip to content

Add dark/light mode theme toggle that actually works #476

Description

@Wilfred007

What

ThemeToggle.tsx component exists but is not wired to a persistent theme state. CSS variables for dark/light themes are incomplete. Wire the toggle to zustand store, persist preference in localStorage, and complete CSS variable sets.

Why

Users expect theme preference to persist. The toggle component exists but doesn't function — it's dead code.

Scope

In scope: Wire ThemeToggle to zustand store, persist in localStorage, complete CSS variable sets for both themes
Out of scope: System theme detection, per-component theme overrides

Acceptance Criteria

  • Toggle switches between dark and light mode
  • Preference persists across page reloads (localStorage)
  • All components render correctly in both themes
  • No hard-coded colors that ignore theme variables

Technical Context

  • frontend/src/components/ThemeToggle.tsx — existing toggle
  • frontend/src/hooks/useTheme.ts — theme hook
  • frontend/src/index.css — CSS variables

Metadata

Metadata

Assignees

No one assigned

    Labels

    GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardThird CampaignCampaign: Third CampaignfrontendFrontend developmentmediumModerate tasks

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions