Skip to content

feat(mobile): implement Dark Mode & Dynamic Theming (System Sync) #149#203

Open
Jopsan-gm wants to merge 1 commit intoPulsefy:mainfrom
Jopsan-gm:feat/mobile-dark-mode
Open

feat(mobile): implement Dark Mode & Dynamic Theming (System Sync) #149#203
Jopsan-gm wants to merge 1 commit intoPulsefy:mainfrom
Jopsan-gm:feat/mobile-dark-mode

Conversation

@Jopsan-gm
Copy link
Copy Markdown
Contributor

@Jopsan-gm Jopsan-gm commented Mar 26, 2026

Tittle: feat(mobile): implement Dark Mode & Dynamic Theming (System Sync) #149

Summary

Implements full Dark Mode support for the QuickEx mobile app. The theme automatically syncs with the user's system settings and can also be manually overridden from the Settings screen — no app restart required.

Closes #149


Changes

  • Add ThemeContext with light | dark | system preference support, persisted in AsyncStorage (no restart required)
  • Extend Colors token palette in constants/theme.ts with full light and dark token sets (text, surface, border, button, input, status, skeleton, pill)
  • Add Theme selector in Settings screen (Light / Dark / System) with radio buttons and accessibility roles
  • Audit and replace hardcoded colors in all mobile screens: index, security, wallet-connect, payment-confirmation, transactions, quick-receive, transaction-item component
  • QR code in quick-receive keeps white background in dark mode to ensure readability (per issue requirement)
  • Dynamic StatusBar style based on active color scheme
  • Wire AppThemeProvider in root _layout.tsx

Acceptance Criteria

  • App looks professional and readable in both light and dark modes
  • Theme transitions are smooth and don't require an app restart
  • QR codes remain scannable in dark mode (white wrapper preserved)
  • useColorScheme from React Native used to detect system theme
  • Theme selector (Light / Dark / System) available in Settings
  • PR includes side-by-side screenshots of key screens in both themes

Files Changed — 11 total

A app/mobile/context/ThemeContext.tsx M
app/mobile/constants/theme.ts M
app/mobile/app/_layout.tsx M
app/mobile/app/index.tsx M
app/mobile/app/settings.tsx M
app/mobile/app/security.tsx M
app/mobile/app/wallet-connect.tsx M
app/mobile/app/payment-confirmation.tsx M
app/mobile/app/transactions.tsx M
app/mobile/app/quick-receive.tsx M
app/mobile/components/transaction-item.tsx


Screenshots

settings_dark_active_1774504446176 home_dark_mode_1774504451350 quick_receive_dark_mode_1774504460180

- Add ThemeContext with light/dark/system preference support
  persisted in AsyncStorage (no restart required)
- Extend Colors token palette in constants/theme.ts with full
  light and dark token sets (text, surface, border, button, input,
  status, skeleton, pill)
- Add Theme selector in Settings screen (Light / Dark / System)
  with radio buttons and accessibility roles
- Audit and replace hardcoded colors in all mobile screens:
  index, security, wallet-connect, payment-confirmation,
  transactions, quick-receive, transaction-item component
- QR code in quick-receive keeps white background in dark mode
  to ensure readability (per issue requirement)
- Dynamic StatusBar style based on active color scheme
- Wire AppThemeProvider in root _layout.tsx

Closes Pulsefy#149
@drips-wave
Copy link
Copy Markdown

drips-wave bot commented Mar 26, 2026

@Jopsan-gm Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Cedarich
Copy link
Copy Markdown
Contributor

Please resolve conflicts let merge

@Cedarich
Copy link
Copy Markdown
Contributor

@Jopsan-gm

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.

Dark Mode & Dynamic Theming (System Sync)

2 participants