Skip to content

[BOUNTY] Implement Dark Mode Theme#156

Open
HuiNeng6 wants to merge 2 commits intoANAVHEOBA:mainfrom
HuiNeng6:feature/dark-mode
Open

[BOUNTY] Implement Dark Mode Theme#156
HuiNeng6 wants to merge 2 commits intoANAVHEOBA:mainfrom
HuiNeng6:feature/dark-mode

Conversation

@HuiNeng6
Copy link

Summary

Implements dark mode theme for PrivacyLayer frontend as specified in #40.

Changes Made

Theme System

  • ✅ Light and dark color schemes
  • ✅ System preference detection
  • ✅ Manual toggle with 3 options (Light/Dark/System)
  • ✅ Preference persistence via Zustand + localStorage

Components Updated

  • ✅ Header component with navigation and theme toggle
  • ✅ ThemeToggle component with visual feedback
  • ✅ ThemeProvider for system preference detection
  • ✅ All pages updated with dark mode styles

Color Palette

  • Defined in Tailwind config with proper contrast
  • CSS variables for consistent theming
  • WCAG AA compliant contrast ratios

Features

  • Theme Store: Zustand store with persist middleware
  • ThemeToggle: Beautiful toggle with icons (☀️/🌙/💻)
  • Smooth Transitions: 200ms transition for theme changes
  • System Detection: Automatically follows system dark/light mode
  • Persistence: Theme preference saved to localStorage

Acceptance Criteria

  • Dark mode implemented
  • All components styled
  • Toggle works
  • Preference persists
  • System preference detected
  • Smooth transitions
  • No visual bugs
  • Contrast ratios meet WCAG AA

Testing

\\�ash
cd frontend
npm install
npm run build
npm run dev
\\

Manual Testing

  1. Open the app
  2. Click the theme toggle in the header
  3. Switch between Light/Dark/System
  4. Refresh the page - preference persists
  5. Toggle system dark mode - System option follows

Bounty

This PR addresses bounty issue #40.

Reward: USDC via Drips Wave

Closes #40

- Next.js 15 with App Router and TypeScript strict mode
- Tailwind CSS for styling with dark mode support
- Basic routing: /deposit, /withdraw, /history
- Freighter wallet integration setup
- Zustand for state management
- TanStack React Query for data fetching
- Environment variable configuration
- README with setup instructions

Closes ANAVHEOBA#23
- Theme store with Zustand + persist middleware
- ThemeProvider for system preference detection
- ThemeToggle component with light/dark/system options
- Updated all pages with dark mode support
- Header component with navigation
- Smooth transitions for theme changes
- WCAG AA compliant contrast ratios

Closes ANAVHEOBA#40
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.

[BOUNTY] Implement Dark Mode Theme

1 participant