Skip to content

feat: add dark mode toggle#101

Open
idiottrader wants to merge 7 commits intosorosave-protocol:mainfrom
idiottrader:feature/dark-mode
Open

feat: add dark mode toggle#101
idiottrader wants to merge 7 commits intosorosave-protocol:mainfrom
idiottrader:feature/dark-mode

Conversation

@idiottrader
Copy link

Summary

This PR adds dark mode support to SoroSave as requested in #31.

Changes

  • ThemeProvider.tsx: React Context for theme management with localStorage persistence
  • ThemeToggle.tsx: Toggle button with sun/moon icons
  • Navbar.tsx: Updated with ThemeToggle and dark mode styles
  • providers.tsx: Integrated ThemeProvider
  • layout.tsx: Added suppressHydrationWarning for Next.js
  • globals.css: Added dark mode CSS variables
  • tailwind.config.js: Enabled darkMode: 'class'

Features

  • ✅ Toggle between light/dark modes
  • ✅ Persist user preference in localStorage
  • ✅ Respect system preference on first load
  • ✅ Smooth transition animations
  • ✅ All existing components styled for both modes

Testing

  • Theme toggle button visible in navbar
  • Clicking toggle switches between light/dark modes
  • Theme preference persists after page reload
  • All components render correctly in both modes
  • No hydration errors in console

Closes #31

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.

Implement dark mode toggle

1 participant