DS-065: Add a user-facing appearance settings panel

[IbrahimIjai]

Context

SO4 supports light, dark, and system themes, but appearance controls are limited
to a compact toggle and do not explain the active preference.

Scope

• Build a settings panel for Light, Dark, and System options.
• Show the resolved theme when System is selected.
• Reuse the existing theme provider and storage key.
• Add small visual previews using semantic design tokens.

Acceptance criteria

• Selection persists and applies without a page reload or flash.
• System changes update the resolved preview in real time.
• Options are a keyboard-accessible radio group.
• Preview cards remain readable in both themes.
• Tests cover persistence, system resolution, and keyboard selection.

Out of scope

• Custom user-authored color palettes.
• Changing the current storage migration strategy.

[AbuJulaybeeb]

@AbuJulaybeeb has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi Maintainer, haven reviewed the description of the issue, and well experienced with Js Library,
I would like to hop on the issue and sure to deliver at ETA 2hrs

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

[Tonyfash]

@Tonyfash has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I would like to fix this issue Maintainer. Please assign it to me.

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

[precious-akpan]

@precious-akpan has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello, I would like to resolve this issue, I have the experience.

Looking forward to working with the team.

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

[drips-wave]

Congratulations, @precious-akpan! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @precious-akpan: 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 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@precious-akpan's PR #500 was approved and merged by @IbrahimIjai.

🏆 @precious-akpan: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (589 total points). Track your full progress on GrantFox.

👏 Great work, @precious-akpan! Keep contributing to SO4-Markets.

[drips-wave]

This issue has been completed by @precious-akpan as part of the Stellar Wave Program's 7th Wave 🥳

😎 @precious-akpan: You earned 200 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.