594a43cbf9
Theme-switch in Settings (System/Light/Dark) jetzt App-weit wirksam für die
Core-Screens. Wave 2 dokumentiert (siehe unten).
Color-System:
- lib/theme.ts: refactored zu colors.light + colors.dark (gleiche keys)
Light: bg #fff, surface #fafafa, surfaceElevated #f5f5f5, border #e5e5e5,
text #0a0a0a, textMuted #737373
Dark: bg #000, surface #1c1c1e, surfaceElevated #2c2c2e, border #38383a,
text #fff, textMuted #8e8e93
brandOrange unverändert #007AFF (iOS system blue)
success/error variieren (light: #16a34a/#dc2626, dark: #30d158/#ff453a)
- legacy `colors` export bleibt als Light-Fallback für nicht-migrierte Files
- new `useColors()` hook → liest aktiven scheme aus useThemeStore
stores/theme.ts:
- Appearance.addChangeListener für live System-Theme-Updates (User schaltet
iOS Dark/Light → App reagiert sofort ohne Reload)
Wave 1 — migrated Files (Core Screens):
- app/_layout.tsx + app/(app)/_layout.tsx + app/(app)/index.tsx (root + home)
- app/settings.tsx (full theme-aware inkl. TrueSheet)
- app/profile/index.tsx (bg + dividers)
- app/devices.tsx (bg, surface, border, icons)
- app/lyra.tsx (chat container, backdrop, bubbles, ThinkingDots, LoadingPulse)
- components/AppHeader (Nativewind classes ersetzt durch theme-aware Styles)
- components/header/HeaderDropdownMenu
- components/profile/* (ProfileHeader, StatsBar, StreakSection, UrgeStatsCard,
ApprovedDomainsList, DemographicsAccordion)
Wave 2 (TODOs für separate Session):
- app/urge.tsx (~20 hardcoded colors, größter Screen)
- app/room.tsx, app/dm.tsx, app/(app)/chat.tsx, app/(app)/mail.tsx, app/(app)/coach.tsx
- app/games.tsx, app/profile/[userId].tsx
- Nativewind classes in PostCard, ComposeCard, PostCardSkeleton, NotificationsDropdown
StatusBar style dynamisch synchronisiert (light bei dark-mode, dark bei light).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import { useThemeStore } from '../stores/theme';
|
|
|
|
export const theme = {
|
|
bg: 'bg-white',
|
|
surface: 'bg-neutral-50',
|
|
surfaceElevated: 'bg-neutral-100',
|
|
border: 'border-neutral-200',
|
|
text: 'text-neutral-900',
|
|
textMuted: 'text-neutral-500',
|
|
brandOrange: 'text-rebreak-500',
|
|
brandOrangeBg: 'bg-rebreak-500',
|
|
brandBlue: 'bg-midnight-800',
|
|
} as const;
|
|
|
|
export type ColorScheme = {
|
|
bg: string;
|
|
surface: string;
|
|
surfaceElevated: string;
|
|
border: string;
|
|
text: string;
|
|
textMuted: string;
|
|
brandOrange: string;
|
|
brandBlue: string;
|
|
success: string;
|
|
error: string;
|
|
warning: string;
|
|
};
|
|
|
|
const light: ColorScheme = {
|
|
bg: '#ffffff',
|
|
surface: '#fafafa',
|
|
surfaceElevated: '#f5f5f5',
|
|
border: '#e5e5e5',
|
|
text: '#0a0a0a',
|
|
textMuted: '#737373',
|
|
brandOrange: '#007AFF',
|
|
brandBlue: '#0e1f3a',
|
|
success: '#16a34a',
|
|
error: '#dc2626',
|
|
warning: '#f59e0b',
|
|
};
|
|
|
|
const dark: ColorScheme = {
|
|
bg: '#000000',
|
|
surface: '#1c1c1e',
|
|
surfaceElevated: '#2c2c2e',
|
|
border: '#38383a',
|
|
text: '#ffffff',
|
|
textMuted: '#8e8e93',
|
|
brandOrange: '#007AFF',
|
|
brandBlue: '#0e1f3a',
|
|
success: '#30d158',
|
|
error: '#ff453a',
|
|
warning: '#ffd60a',
|
|
};
|
|
|
|
export const colorSchemes = { light, dark };
|
|
|
|
export function useColors(): ColorScheme {
|
|
const scheme = useThemeStore((s) => s.colorScheme);
|
|
return scheme === 'dark' ? dark : light;
|
|
}
|
|
|
|
// Legacy flat export — used by files that haven't migrated to useColors() yet.
|
|
// Wave 2 should remove this.
|
|
export const colors = light;
|