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

Activity

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

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