Add dark / light mode toggle

[Miracle656]

Background

Veil currently uses a fixed dark theme. Users who prefer light mode get no choice. Adding a dark/light toggle improves accessibility and makes the wallet feel more polished for mainnet launch.

What to build

Add a theme toggle to the wallet settings page that switches between dark (current) and light themes. Persist the preference in localStorage.

Key files

• frontend/wallet/app/globals.css — define light theme CSS variables under [data-theme="light"]
• frontend/wallet/app/settings/page.tsx — add toggle UI here

Suggested execution

git checkout -b feature/dark-light-mode-toggle

1. In globals.css, add a [data-theme="light"] block overriding --near-black, --off-white, card backgrounds, etc.
2. On mount, read localStorage.getItem("veil_theme") and apply document.documentElement.setAttribute("data-theme", ...)
3. Add a toggle to settings/page.tsx — use the existing SVG icon style (no emojis)
4. Persist changes with localStorage.setItem("veil_theme", value)
5. Ensure the gold, teal, and navy accent colours remain legible in both modes

Example commit message:
feat(wallet): add dark/light mode toggle with localStorage persistence

Acceptance criteria

• Toggle visible in settings page
• Theme persists across page reloads and lock/unlock cycles
• All pages render legibly in both modes
• No emojis — SVG icons only, consistent with existing UI

---

Drips Wave · Complexity: Medium · 150 points
Comment below to request assignment. PR must include Closes #[this issue].

[Depo-dev]

@Depo-dev has applied to work on this issue as part of the Stellar Wave Program's 4th wave.

Hello, I’m a frontend-focused software engineer with experience in React/Next.js and building polished, production-ready UI systems. I’ve implemented theme systems with persistent state and accessibility considerations across multiple applications.

For this feature, I’ll introduce a light/dark theme toggle within the settings page, using CSS variables and a data-theme attribute to manage styles cleanly. I’ll ensure the preference persists via localStorage and applies immediately on app load, including across lock/unlock cycles. Special care will be taken to maintain visual consistency and readability of existing color accents in both modes, delivering a seamless and user-friendly theming experience.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Depo-dev to this issue.

[drips-wave]

Congratulations, @Depo-dev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on April 29, 2026.

🧑‍💻 @Depo-dev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @Depo-dev as part of the Stellar Wave Program's 4th Wave 🥳

😎 @Depo-dev: You earned 150 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.