Skip to content

[Frontend] Dark/light mode theme toggle with persistent preference #12

Description

@Gbangbolaoluwagbemiga

Overview

`next-themes` is already installed but there's no toggle in the UI. Users on light OS themes are stuck with the dark dApp.

What needs to be done

  1. Add sun/moon icon toggle button to the navbar (Lucide icons already installed)
  2. Wire to `next-themes`: `const { theme, setTheme } = useTheme()`
  3. Verify CSS variables defined for both `:root` (light) and `.dark` in `src/index.css`
  4. Confirm `ThemeProvider` wraps app in `src/main.tsx`
  5. Audit all pages render correctly in light mode

Acceptance criteria

  • Toggle visible in navbar
  • Preference persists after page refresh
  • All pages readable in both themes
  • Respects `prefers-color-scheme` on first visit (no hydration flash)

Good first issue: Touches layout/theming only, no contract logic.

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

    frontendReact / TypeScript UI workgood first issueWelcoming to new contributorsuxUser-facing experience improvements

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions