Add light/dark theme support + shared palette parity (Qortal Extension)

[QuickMythril]

Summary

Qortal Hub supports light and dark themes using a full theme provider with
design tokens (surface colors, text colors, backgrounds, borders, typography).

Qortal Go and the Chrome Extension currently:

• Use a single, mostly hardcoded light theme,
• Have no theme toggle,
• Do not use a shared palette or tokens,
• Cannot match Hub’s appearance at night or for accessibility.

This issue adds full theming parity, using Hub’s palette as reference.

---

Current Behavior

Hub (reference)

• Uses MUI theme provider.
• Has dark/light theme objects with:
  • palette.surface / background
  • text.primary / text.secondary
  • typography sizes
  • border + shadow tokens
• Toggle stored in settings.
• All components reference theme tokens (no direct hardcoded colors).

Mobile (Go)

From go_implementation_plan.md:

• RN screens use hardcoded hex colors.
• No theme context.
• No user toggle or system-dark synch.
• Many components need rewrite to theme-aware styles.

Chrome Extension

From chrome_extension_implementation_plan.md:

• Has a fragmentary theme object but only one theme.
• Many components still use raw CSS colors.
• No theme toggle UI.
• No persistent user preference.

---

Target Behavior (Parity with Hub)

Across Mobile + Extension:

• A ThemeProvider (or ThemeContext for RN) with:
  • Light theme object
  • Dark theme object
  • Shared color tokens aligned with Hub (background, surface, primary, secondary, chat bubble colors, icon colors)
• Add a theme toggle in Settings:
  • Options: Light / Dark / (optional: Follow System)
  • Persisted via local storage / RN async storage
• Replace all hardcoded colors with theme tokens
• Extend all components: chat list, chat bubbles, headers, inputs, side panels, modal backgrounds
• Night mode fully usable:
  • Text readable (contrast)
  • Background not blinding
  • Icons recolor or swap depending on palette

---

Acceptance Criteria

Theming Core

• Two theme objects: lightTheme, darkTheme
• All components read colors from theme tokens
• No hardcoded color values left in UI components

UX/Settings

• Theme toggle exists in Settings
• Toggle persists across restarts
• Optional: “Follow System” works on Mobile (RN supports it)

Components Updated

• Chat list + chat bubbles
• Inputs / text areas
• Headers + footers
• Side panels
• Background surfaces
• Message timestamps, icons, border colors
• Modals / previews

QA / Visual Tests

• Light theme matches Hub’s general palette
• Dark theme matches Hub’s dark palette (approximate is OK)
• No unreadable text or “white flash” transitions
• Extension popup looks correct in dark mode
• Mobile screens readable in low-light

---

How to Test

1. Switch theme → verify the entire UI changes palette.
2. Close and reopen → theme persists.
3. Test chat readability under both themes.
4. Open modals, lists, avatar previews, image viewers — check backgrounds and text.
5. On Mobile: Test “Follow System” if implemented.

---

Links

• Trifecta parity matrix (Theme = Missing on Mobile + Extension)
• Implementation plans:
  • /mnt/data/hub_reference_implementation_notes.md
  • /mnt/data/go_implementation_plan.md
  • /mnt/data/chrome_extension_implementation_plan.md