Skip to content

feat: Add dark mode toggle with system preference detection - #34

Open
derekliutao-cmd wants to merge 5 commits into
coopfinance:mainfrom
derekliutao-cmd:feat/dark-mode-toggle
Open

feat: Add dark mode toggle with system preference detection#34
derekliutao-cmd wants to merge 5 commits into
coopfinance:mainfrom
derekliutao-cmd:feat/dark-mode-toggle

Conversation

@derekliutao-cmd

Copy link
Copy Markdown
Contributor

Summary

Closes #10

Implements dark mode toggle with system preference detection using next-themes.

Changes

src/app/globals.css — Added .dark class with dark mode CSS variable overrides (dark backgrounds, light foregrounds, adjusted primary/muted/border colors)

src/components/ui/theme-provider.tsx (new) — ThemeProvider wrapper around next-themes, configured with attribute="class", defaultTheme="system", enableSystem, disableTransitionOnChange

src/components/ui/theme-toggle.tsx (new) — Sun/Moon toggle button with:

  • Hydration-safe rendering (mounted check)
  • Smooth rotation/scale animation between icons
  • Accessible aria-label

src/components/providers.tsx — Wrapped QueryClientProvider with ThemeProvider

src/components/ui/sidebar.tsx — Added ThemeToggle next to Stellar Testnet indicator in sidebar footer

Acceptance Criteria Met

  • Dark mode CSS variable overrides in globals.css
  • ThemeProvider using next-themes (attribute="class", system default)
  • Toggle button (sun/moon) in sidebar footer, accessible
  • System preference detected on first load (enableSystem)
  • suppressHydrationWarning on html element (already in layout.tsx)
  • No flash of wrong theme (disableTransitionOnChange + suppressHydrationWarning)

Note

Requires adding next-themes to package.json dependencies (^0.3.0)

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Frontend] Implement dark mode toggle with system preference detection

1 participant