[Feature] Dark Mode Switch mit Catppuccin-Mocha-Theme #521

New issue

Open

opened 2026-07-25 19:34:35 +02:00 by admin-mrrm · 0 comments

admin-mrrm commented

2026-07-25 19:34:35 +02:00

Owner

Ziel

Umschaltbares Light/Dark-Theme im Profil-Menü (Web + Mobile), Dark-Variante an Catppuccin Mocha angelehnt.

Umsetzung

packages/ui/src/theme/theme-context.tsx: ThemeModeProvider + useThemeMode(), persistiert über injizierten ThemeStorage-Adapter (In-Memory-Default, App liefert echten Adapter)
packages/ui/src/theme/theme-switch.tsx: ThemeSwitch-Komponente (Tamagui Switch), in beiden ProfileMenüs eingehängt
packages/ui/src/tamagui.config.ts: dark-Theme komplett über @tamagui/theme-builder aus einer Catppuccin-Mocha-Palette neu generiert (inkl. aller Component-Sub-Themes wie dark_Switch, dark_Button, und Akzentfarben dark_red/dark_green/dark_yellow/dark_orange/dark_purple/dark_pink) — automatischer Kontrast für neue Components, ohne Farben pro Control von Hand zu setzen
packages/ui/src/provider.tsx: UiProvider setzt das Theme reaktiv direkt über TamaguiProviders eigenes defaultTheme-Prop (nicht über eine separat verschachtelte <Theme>-Komponente), weil Popover/Sheet/Dialog/Toast über @tamagui/portal rendern und eine verschachtelte <Theme> diesen Portal-Host nicht erreicht
apps/mobile/app/_layout.tsx: React-Navigation-Header (Stack + Drawer) folgt demselben mode-State — eigenes Theming-System, unabhängig von Tamagui, Farben manuell synchron gehalten
Umbenennung mrrmlab_light/mrrmlab_dark → light/dark, weil @tamagui/theme-builders Namenskonvention für Sub-Themes das erste Namenssegment light/dark braucht

Test

Kein neuer Test ergänzt — reine Presentational-/Konfigurationsänderung (Farbwerte, Provider-Verschachtelung), abgesichert durch Typecheck. Manuell auf echtem Gerät (Mobile) und im Browser (Web) verifiziert: Umschalten funktioniert, Header + Popover + Switch + Buttons zeigen korrekten Kontrast in beiden Modi.

## Ziel Umschaltbares Light/Dark-Theme im Profil-Menü (Web + Mobile), Dark-Variante an Catppuccin Mocha angelehnt. ## Umsetzung - `packages/ui/src/theme/theme-context.tsx`: `ThemeModeProvider` + `useThemeMode()`, persistiert über injizierten `ThemeStorage`-Adapter (In-Memory-Default, App liefert echten Adapter) - `packages/ui/src/theme/theme-switch.tsx`: `ThemeSwitch`-Komponente (Tamagui `Switch`), in beiden ProfileMenüs eingehängt - `packages/ui/src/tamagui.config.ts`: `dark`-Theme komplett über `@tamagui/theme-builder` aus einer Catppuccin-Mocha-Palette neu generiert (inkl. aller Component-Sub-Themes wie `dark_Switch`, `dark_Button`, und Akzentfarben `dark_red`/`dark_green`/`dark_yellow`/`dark_orange`/`dark_purple`/`dark_pink`) — automatischer Kontrast für neue Components, ohne Farben pro Control von Hand zu setzen - `packages/ui/src/provider.tsx`: `UiProvider` setzt das Theme reaktiv direkt über `TamaguiProvider`s eigenes `defaultTheme`-Prop (nicht über eine separat verschachtelte `<Theme>`-Komponente), weil Popover/Sheet/Dialog/Toast über `@tamagui/portal` rendern und eine verschachtelte `<Theme>` diesen Portal-Host nicht erreicht - `apps/mobile/app/_layout.tsx`: React-Navigation-Header (Stack + Drawer) folgt demselben `mode`-State — eigenes Theming-System, unabhängig von Tamagui, Farben manuell synchron gehalten - Umbenennung `mrrmlab_light`/`mrrmlab_dark` → `light`/`dark`, weil `@tamagui/theme-builder`s Namenskonvention für Sub-Themes das erste Namenssegment `light`/`dark` braucht ## Test Kein neuer Test ergänzt — reine Presentational-/Konfigurationsänderung (Farbwerte, Provider-Verschachtelung), abgesichert durch Typecheck. Manuell auf echtem Gerät (Mobile) und im Browser (Web) verifiziert: Umschalten funktioniert, Header + Popover + Switch + Buttons zeigen korrekten Kontrast in beiden Modi.