Skip to content

Add dark mode support to soroban-client with persistent theme toggle and system preference fallback#165

Open
EtimbukUdofia wants to merge 1 commit into
crowdpass-live:mainfrom
EtimbukUdofia:feat/dark-mode-support
Open

Add dark mode support to soroban-client with persistent theme toggle and system preference fallback#165
EtimbukUdofia wants to merge 1 commit into
crowdpass-live:mainfrom
EtimbukUdofia:feat/dark-mode-support

Conversation

@EtimbukUdofia
Copy link
Copy Markdown
Contributor

Summary

This PR implements dark mode support for the soroban-client frontend and resolves issue #88.

What is included

  • Added a global theme controller with:
    • light and dark theme support
    • system preference fallback by default
    • theme persistence in localStorage
  • Added a theme toggle in the header for both desktop and mobile navigation
  • Added early theme initialization in the localized app layout to prevent theme flicker during hydration
  • Updated global styling tokens and dark mode variant setup
  • Updated shared UI components and page wrappers for dark mode compatibility using Tailwind dark utilities
  • Added a focused header test to verify:
    • theme toggle behavior
    • localStorage persistence
    • root dark class updates

Issue

Closes #88

Scope Notes

This PR is intentionally scoped to dark mode support and related UI compatibility updates.
Unrelated pre-existing lint/build issues in other areas of soroban-client were not addressed as part of this issue fix.

Validation

  • Header theme test suite passes:
    • 1 test suite passed
    • 4 tests passed
  • File-level diagnostics on touched dark mode files report no errors

User Impact

  • Users can switch between light and dark mode from the header
  • Theme preference persists across sessions
  • If no preference is saved, the app follows the operating system color scheme
  • UI surfaces across updated pages and components now render correctly in both themes

- Added ThemeToggle component for switching between light and dark modes.
- Created ThemeContext to manage theme preferences and resolved themes.
- Integrated theme persistence using localStorage.
- Updated MarketplaceListings, PartnersSection, and TicketQRModal components for improved styling and accessibility.
- Refactored loading states and empty listings messages for better user experience.
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Apr 25, 2026

@EtimbukUdofia 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

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.

Add dark mode support to frontend

1 participant