refactor: add AuthGuard component and fix API client empty response handling

- Add reusable AuthGuard component for protected routes
- Move auth logic from index.tsx to (tabs)/_layout.tsx via AuthGuard
- Fix ApiClient to handle empty responses (204 No Content)
- Use useFocusEffect in chat.tsx to load messages after auth is ready
- Extract getDateKey() helper function in calendar.tsx

CLAUDE.md

@@ -72,30 +72,33 @@ src/
 │   ├── login.tsx               # Login screen
 │   ├── register.tsx            # Registration screen
 │   ├── (tabs)/                 # Tab navigation group
-│   │   ├── _layout.tsx         # Tab bar configuration
+│   │   ├── _layout.tsx         # Tab bar configuration (themed)
 │   │   ├── chat.tsx            # Chat screen (AI conversation)
-│   │   └── calendar.tsx        # Calendar overview
+│   │   ├── calendar.tsx        # Calendar overview
+│   │   └── settings.tsx        # Settings screen (theme switcher, logout)
 │   ├── event/
 │   │   └── [id].tsx            # Event detail screen (dynamic route)
 │   └── note/
 │       └── [id].tsx            # Note editor for event (dynamic route)
 ├── components/
-│   ├── BaseBackground.tsx      # Common screen wrapper
+│   ├── AuthGuard.tsx           # Auth wrapper: loads user, shows loading, redirects if unauthenticated
-│   ├── Header.tsx              # Header component with logout button
+│   ├── BaseBackground.tsx      # Common screen wrapper (themed)
-│   ├── AuthButton.tsx          # Reusable button for auth screens (with shadow)
+│   ├── BaseButton.tsx          # Reusable button component (themed, supports children)
+│   ├── Header.tsx              # Header component (themed)
+│   ├── AuthButton.tsx          # Reusable button for auth screens (themed, with shadow)
 │   ├── ChatBubble.tsx          # Reusable chat bubble component (used by ChatMessage & TypingIndicator)
 │   ├── TypingIndicator.tsx     # Animated typing indicator (. .. ...) shown while waiting for AI response
 │   ├── EventCardBase.tsx       # Shared event card layout with icons (used by EventCard & ProposedEventCard)
 │   ├── EventCard.tsx           # Calendar event card (uses EventCardBase + edit/delete buttons)
-│   ├── EventConfirmDialog.tsx  # AI-proposed event confirmation modal
+│   ├── EventConfirmDialog.tsx  # AI-proposed event confirmation modal (skeleton)
 │   └── ProposedEventCard.tsx   # Chat event proposal (uses EventCardBase + confirm/reject buttons)
-├── Themes.tsx                  # Centralized color/theme definitions
+├── Themes.tsx                  # Theme definitions: THEMES object with defaultLight/defaultDark, Theme type
 ├── logging/
 │   ├── index.ts                # Re-exports
 │   └── logger.ts               # react-native-logs config (apiLogger, storeLogger)
 ├── services/
 │   ├── index.ts                # Re-exports all services
-│   ├── ApiClient.ts            # HTTP client with X-User-Id header injection, request logging
+│   ├── ApiClient.ts            # HTTP client with X-User-Id header injection, request logging, handles empty responses (204)
 │   ├── AuthService.ts          # login(), register(), logout() - calls API and updates AuthStore
 │   ├── EventService.ts         # getAll(), getById(), getByDateRange(), create(), update(), delete()
 │   └── ChatService.ts          # sendMessage(), confirmEvent(), rejectEvent(), getConversations(), getConversation()
@@ -104,10 +107,54 @@ src/
     ├── AuthStore.ts            # user, isAuthenticated, isLoading, login(), logout(), loadStoredUser()
     │                           # Uses expo-secure-store (native) / localStorage (web)
     ├── ChatStore.ts            # messages[], isWaitingForResponse, addMessage(), addMessages(), updateMessage(), clearMessages(), setWaitingForResponse(), chatMessageToMessageData()
-    └── EventsStore.ts          # events[], setEvents(), addEvent(), updateEvent(), deleteEvent()
+    ├── EventsStore.ts          # events[], setEvents(), addEvent(), updateEvent(), deleteEvent()
+    └── ThemeStore.ts           # theme, setTheme() - reactive theme switching with Zustand
 ```
 
-**Routing:** Tab-based navigation with Chat and Calendar as main screens. Auth screens (login, register) outside tabs. Dynamic routes for event detail and note editing.
+**Routing:** Tab-based navigation with Chat, Calendar, and Settings as main screens. Auth screens (login, register) outside tabs. Dynamic routes for event detail and note editing.
+
+**Authentication Flow:**
+- `AuthGuard` component wraps the tab layout in `(tabs)/_layout.tsx`
+- On app start, `AuthGuard` calls `loadStoredUser()` and shows loading indicator
+- If not authenticated, redirects to `/login`
+- `index.tsx` simply redirects to `/(tabs)/chat` - AuthGuard handles the rest
+- This pattern handles Expo Router's navigation state caching (avoids race conditions)
+
+### Theme System
+
+The app supports multiple themes (light/dark) via a reactive Zustand store.
+
+**Theme Structure (`Themes.tsx`):**
+```typescript
+export type Theme = {
+  chatBot, primeFg, primeBg, secondaryBg, messageBorderBg, placeholderBg,
+  calenderBg, confirmButton, rejectButton, disabledButton, buttonText,
+  textPrimary, textSecondary, textMuted, eventIndicator, borderPrimary, shadowColor
+};
+
+export const THEMES = {
+  defaultLight: { ... },
+  defaultDark: { ... }
+} as const satisfies Record<string, Theme>;
+```
+
+**Usage in Components:**
+```typescript
+import { useThemeStore } from "../stores/ThemeStore";
+
+const MyComponent = () => {
+  const { theme } = useThemeStore();
+  return <View style={{ backgroundColor: theme.primeBg }} />;
+};
+```
+
+**Theme Switching:**
+```typescript
+const { setTheme } = useThemeStore();
+setTheme("defaultDark"); // or "defaultLight"
+```
+
+**Note:** `shadowColor` only works on iOS. Android uses `elevation` with system-defined shadow colors.
 
 ### Backend Architecture (apps/server)
 
@@ -373,13 +420,21 @@ NODE_ENV=development        # development = pretty logs, production = JSON
 - **Authentication fully implemented:**
   - `AuthStore`: Manages user state with expo-secure-store (native) / localStorage (web)
   - `AuthService`: login(), register(), logout() - calls backend API
-  - `ApiClient`: Automatically injects X-User-Id header for authenticated requests
+  - `ApiClient`: Automatically injects X-User-Id header for authenticated requests, handles empty responses (204)
+  - `AuthGuard`: Reusable component that wraps protected routes - loads user, shows loading, redirects if unauthenticated
   - Login screen: Supports email OR userName login
   - Register screen: Email validation, checks for existing email/userName
-  - `AuthButton`: Reusable button component with shadow effect
+  - `AuthButton`: Reusable button component with themed shadow
-  - `Header`: Contains logout button on all screens
+  - `Header`: Themed header component (logout moved to Settings)
-  - `index.tsx`: Auth redirect - checks stored user on app start
+  - `(tabs)/_layout.tsx`: Wraps tabs with AuthGuard for protected access
-- Tab navigation (Chat, Calendar) implemented with basic UI
+  - `index.tsx`: Simple redirect to chat (AuthGuard handles auth)
+- **Theme system fully implemented:**
+  - `ThemeStore`: Zustand store with theme state and setTheme()
+  - `Themes.tsx`: THEMES object with defaultLight/defaultDark variants
+  - All components use `useThemeStore()` for reactive theme colors
+  - Settings screen with theme switcher (light/dark)
+  - `BaseButton`: Reusable themed button component
+- Tab navigation (Chat, Calendar, Settings) implemented with themed UI
 - Calendar screen fully functional:
   - Month navigation with grid display and Ionicons (chevron-back/forward)
   - MonthSelector dropdown with infinite scroll (dynamically loads months, lazy-loaded when modal opens, cleared on close for memory efficiency)
@@ -393,7 +448,7 @@ NODE_ENV=development        # development = pretty logs, production = JSON
   - Arrow navigation between proposals with "Event X von Y" counter
   - Each proposal individually confirmable/rejectable
   - **Typing indicator**: Animated dots (. .. ...) shown after 500ms delay while waiting for AI response
-  - Messages persisted to database via ChatService and loaded on mount
+  - Messages persisted to database via ChatService, loaded via `useFocusEffect` when screen gains focus
   - Tracks conversationId for message continuity across sessions
   - ChatStore with addMessages() for bulk loading, chatMessageToMessageData() helper
   - KeyboardAvoidingView for proper keyboard handling (iOS padding, Android height)
@@ -404,9 +459,10 @@ NODE_ENV=development        # development = pretty logs, production = JSON
 - `EventCardBase`: Shared base component with event layout (header, date/time/recurring icons, description) - used by both EventCard and ProposedEventCard
 - `EventCard`: Uses EventCardBase + edit/delete buttons for calendar display
 - `ProposedEventCard`: Uses EventCardBase + confirm/reject buttons for chat proposals (supports create/update/delete actions)
-- `Themes.tsx`: Centralized color definitions including textPrimary, borderPrimary, eventIndicator, secondaryBg
+- `Themes.tsx`: Theme definitions with THEMES object (defaultLight, defaultDark) including all color tokens (textPrimary, borderPrimary, eventIndicator, secondaryBg, shadowColor, etc.)
 - `EventsStore`: Zustand store with setEvents(), addEvent(), updateEvent(), deleteEvent() - stores ExpandedEvent[]
 - `ChatStore`: Zustand store with addMessage(), addMessages(), updateMessage(), clearMessages(), isWaitingForResponse/setWaitingForResponse() for typing indicator - loads from server on mount and persists across tab switches
+- `ThemeStore`: Zustand store with theme/setTheme() for reactive theme switching across all components
 - `ChatBubble`: Reusable chat bubble component with Tailwind styling, used by ChatMessage and TypingIndicator
 - `TypingIndicator`: Animated typing indicator component showing `. → .. → ...` loop while waiting for AI response
 - Event Detail and Note screens exist as skeletons

apps/client/app.json

@@ -2,7 +2,7 @@
   "expo": {
     "jsEngine": "hermes",
     "name": "CalChat",
-    "slug": "calchat",
+    "slug": "caldav",
     "version": "1.0.0",
     "orientation": "portrait",
     "scheme": "calchat",
@@ -32,6 +32,7 @@
       "eas": {
         "projectId": "b722dde6-7d89-48ff-9095-e007e7c7da87"
       }
-    }
+    },
+    "owner": "gilmour109"
   }
 }

apps/client/src/Themes.tsx

@@ -1,4 +1,4 @@
-type Theme = {
+export type Theme = {
   chatBot: string;
   primeFg: string;
   primeBg: string;
@@ -15,9 +15,11 @@ type Theme = {
   textMuted: string;
   eventIndicator: string;
   borderPrimary: string;
+  shadowColor: string;
 };
 
-const defaultLight: Theme = {
+export const THEMES = {
+  defaultLight: {
     chatBot: "#DE6C20",
     primeFg: "#3B3329",
     primeBg: "#FFEEDE",
@@ -34,7 +36,25 @@ const defaultLight: Theme = {
     textMuted: "#888",
     eventIndicator: "#DE6C20",
     borderPrimary: "#000000",
-};
+    shadowColor: "#000000",
-
+  },
-let currentTheme: Theme = defaultLight;
+  defaultDark: {
-export default currentTheme;
+    chatBot: "#DE6C20",
+    primeFg: "#F5E6D3",
+    primeBg: "#1A1512",
+    secondaryBg: "#2A2420",
+    messageBorderBg: "#3A3430",
+    placeholderBg: "#4A4440",
+    calenderBg: "#3D2A1A",
+    confirmButton: "#22c55e",
+    rejectButton: "#ef4444",
+    disabledButton: "#555",
+    buttonText: "#FFFFFF",
+    textPrimary: "#FFFFFF",
+    textSecondary: "#AAA",
+    textMuted: "#777",
+    eventIndicator: "#DE6C20",
+    borderPrimary: "#FFFFFF",
+    shadowColor: "#FFFFFF",
+  }
+} as const satisfies Record<string, Theme>;

apps/client/src/app/(tabs)/_layout.tsx

@@ -1,9 +1,12 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import theme from "../../Themes";
+import { useThemeStore } from "../../stores/ThemeStore";
+import { AuthGuard } from "../../components/AuthGuard";
 
 export default function TabLayout() {
+  const { theme } = useThemeStore();
   return (
+    <AuthGuard>
       <Tabs
       screenOptions={{
         headerShown: false,
@@ -30,6 +33,16 @@ export default function TabLayout() {
           ),
         }}
       />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={28} name="settings" color={color} />
+          ),
+        }}
+      />
       </Tabs>
+    </AuthGuard>
   );
 }

apps/client/src/app/(tabs)/calendar.tsx

@@ -19,7 +19,7 @@ import React, {
 } from "react";
 import { useFocusEffect } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
-import currentTheme from "../../Themes";
+import { useThemeStore } from "../../stores/ThemeStore";
 import BaseBackground from "../../components/BaseBackground";
 import { FlashList } from "@shopify/flash-list";
 import { EventService } from "../../services";
@@ -33,6 +33,14 @@ type MonthItem = {
   label: string; // e.g. "January 2024"
 };
 
+/**
+ * Formats a Date object to a string key in YYYY-MM-DD format.
+ * Used for grouping and looking up events by date.
+ */
+const getDateKey = (date: Date): string => {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+};
+
 const generateMonths = (
   centerYear: number,
   centerMonth: number,
@@ -108,7 +116,7 @@ const Calendar = () => {
     const map = new Map<string, ExpandedEvent[]>();
     events.forEach((e) => {
       const date = new Date(e.occurrenceStart);
-      const key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+      const key = getDateKey(date);
       if (!map.has(key)) map.set(key, []);
       map.get(key)!.push(e);
     });
@@ -157,7 +165,7 @@ const Calendar = () => {
             deleteEvent(event.id);
             // Close overlay if no more events for this date
             if (selectedDate) {
-              const dateKey = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, "0")}-${String(selectedDate.getDate()).padStart(2, "0")}`;
+              const dateKey = getDateKey(selectedDate);
               const remainingEvents = eventsByDate.get(dateKey) || [];
               if (remainingEvents.length <= 1) {
                 setSelectedDate(null);
@@ -175,7 +183,7 @@ const Calendar = () => {
   // Get events for selected date
   const selectedDateEvents = useMemo(() => {
     if (!selectedDate) return [];
-    const key = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, "0")}-${String(selectedDate.getDate()).padStart(2, "0")}`;
+    const key = getDateKey(selectedDate);
     return eventsByDate.get(key) || [];
   }, [selectedDate, eventsByDate]);
 
@@ -226,6 +234,7 @@ const EventOverlay = ({
   onEditEvent,
   onDeleteEvent,
 }: EventOverlayProps) => {
+  const { theme } = useThemeStore();
   if (!date) return null;
 
   const dateString = date.toLocaleDateString("de-DE", {
@@ -250,9 +259,9 @@ const EventOverlay = ({
         <Pressable
           className="w-11/12 max-h-3/4 rounded-2xl overflow-hidden"
           style={{
-            backgroundColor: currentTheme.primeBg,
+            backgroundColor: theme.primeBg,
             borderWidth: 4,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
           }}
           onPress={(e) => e.stopPropagation()}
         >
@@ -260,13 +269,13 @@ const EventOverlay = ({
           <View
             className="px-4 py-3"
             style={{
-              backgroundColor: currentTheme.chatBot,
+              backgroundColor: theme.chatBot,
               borderBottomWidth: 3,
-              borderBottomColor: currentTheme.borderPrimary,
+              borderBottomColor: theme.borderPrimary,
             }}
           >
-            <Text className="font-bold text-lg">{dateString}</Text>
+            <Text className="font-bold text-lg" style={{ color: theme.textPrimary }}>{dateString}</Text>
-            <Text>
+            <Text style={{ color: theme.textPrimary }}>
               {events.length} {events.length === 1 ? "Termin" : "Termine"}
             </Text>
           </View>
@@ -289,10 +298,10 @@ const EventOverlay = ({
             className="py-3 items-center"
             style={{
               borderTopWidth: 1,
-              borderTopColor: currentTheme.placeholderBg,
+              borderTopColor: theme.placeholderBg,
             }}
           >
-            <Text style={{ color: currentTheme.primeFg }} className="font-bold">
+            <Text style={{ color: theme.primeFg }} className="font-bold">
               Schließen
             </Text>
           </Pressable>
@@ -319,6 +328,7 @@ const MonthSelector = ({
   currentMonthIndex,
   onSelectMonth,
 }: MonthSelectorProps) => {
+  const { theme } = useThemeStore();
   const heightAnim = useRef(new Animated.Value(0)).current;
   const listRef = useRef<React.ComponentRef<typeof FlashList<MonthItem>>>(null);
   const INITIAL_RANGE = 12; // 12 months before and after current
@@ -397,11 +407,11 @@ const MonthSelector = ({
         style={{
           backgroundColor:
             item.monthIndex % 2 === 0
-              ? currentTheme.primeBg
+              ? theme.primeBg
-              : currentTheme.secondaryBg,
+              : theme.secondaryBg,
         }}
       >
-        <Text className="text-xl" style={{ color: currentTheme.primeFg }}>
+        <Text className="text-xl" style={{ color: theme.primeFg }}>
           {item.label}
         </Text>
       </View>
@@ -423,9 +433,9 @@ const MonthSelector = ({
             left: position.left,
             width: position.width,
             height: heightAnim,
-            backgroundColor: currentTheme.primeBg,
+            backgroundColor: theme.primeBg,
             borderWidth: 2,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
             borderRadius: 8,
           }}
         >
@@ -457,6 +467,7 @@ type CalendarHeaderProps = {
 };
 
 const CalendarHeader = (props: CalendarHeaderProps) => {
+  const { theme } = useThemeStore();
   const [modalVisible, setModalVisible] = useState(false);
   const [dropdownPosition, setDropdownPosition] = useState({
     top: 0,
@@ -482,16 +493,16 @@ const CalendarHeader = (props: CalendarHeaderProps) => {
         ref={containerRef}
         className="relative flex flex-row items-center justify-around"
       >
-        <Text className="text-4xl px-1">
+        <Text className="text-4xl px-1" style={{ color: theme.textPrimary }}>
           {MONTHS[props.monthIndex]} {props.currentYear}
         </Text>
         <Pressable
           className="flex justify-center items-center w-12 h-12 border rounded-lg"
           style={{
-            borderColor: currentTheme.primeFg,
+            borderColor: theme.primeFg,
-            backgroundColor: currentTheme.chatBot,
+            backgroundColor: theme.chatBot,
             // iOS shadow
-            shadowColor: "#000",
+            shadowColor: theme.shadowColor,
             shadowOffset: { width: 0, height: 3 },
             shadowOpacity: 0.35,
             shadowRadius: 5,
@@ -503,7 +514,7 @@ const CalendarHeader = (props: CalendarHeaderProps) => {
           <Ionicons
             name="chevron-down"
             size={28}
-            color={currentTheme.primeFg}
+            color={theme.primeFg}
           />
         </Pressable>
       </View>
@@ -528,15 +539,17 @@ type ChangeMonthButtonProps = {
   icon: "chevron-back" | "chevron-forward";
 };
 
-const ChangeMonthButton = (props: ChangeMonthButtonProps) => (
+const ChangeMonthButton = (props: ChangeMonthButtonProps) => {
+  const { theme } = useThemeStore();
+  return (
     <Pressable
       onPress={props.onPress}
       className="w-16 h-16 flex items-center justify-center mx-2 rounded-xl border border-solid"
       style={{
-      backgroundColor: currentTheme.chatBot,
+        backgroundColor: theme.chatBot,
-      borderColor: currentTheme.primeFg,
+        borderColor: theme.primeFg,
         // iOS shadow
-      shadowColor: "#000",
+        shadowColor: theme.shadowColor,
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.3,
         shadowRadius: 8,
@@ -547,23 +560,27 @@ const ChangeMonthButton = (props: ChangeMonthButtonProps) => (
       <Ionicons
         name={props.icon}
         size={48}
-      color={currentTheme.primeFg}
+        color={theme.primeFg}
         style={{
           marginLeft: props.icon === "chevron-forward" ? 4 : 0,
           marginRight: props.icon === "chevron-back" ? 4 : 0,
         }}
       />
     </Pressable>
-);
+  );
+};
 
-const WeekDaysLine = () => (
+const WeekDaysLine = () => {
+  const { theme } = useThemeStore();
+  return (
     <View className="flex flex-row items-center justify-around px-2 gap-2">
       {/* TODO: px and gap need fine tuning to perfectly align with the grid */}
       {DAYS.map((day, i) => (
-      <Text key={i}>{day.substring(0, 2).toUpperCase()}</Text>
+        <Text key={i} style={{ color: theme.textPrimary }}>{day.substring(0, 2).toUpperCase()}</Text>
       ))}
     </View>
-);
+  );
+};
 
 type CalendarGridProps = {
   month: Month;
@@ -573,6 +590,7 @@ type CalendarGridProps = {
 };
 
 const CalendarGrid = (props: CalendarGridProps) => {
+  const { theme } = useThemeStore();
   const { baseDate, dateOffset } = useMemo(() => {
     const monthIndex = MONTHS.indexOf(props.month);
     const base = new Date(props.year, monthIndex, 1);
@@ -587,15 +605,11 @@ const CalendarGrid = (props: CalendarGridProps) => {
     return date;
   };
 
-  const getDateKey = (date: Date): string => {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-  };
-
   return (
     <View
       className="h-full flex-1 flex-col flex-wrap gap-2 p-2"
       style={{
-        backgroundColor: currentTheme.calenderBg,
+        backgroundColor: theme.calenderBg,
       }}
     >
       {Array.from({ length: 6 }).map((_, i) => (
@@ -631,6 +645,7 @@ type SingleDayProps = {
 };
 
 const SingleDay = (props: SingleDayProps) => {
+  const { theme } = useThemeStore();
   const isSameMonth = MONTHS[props.date.getMonth()] === props.month;
 
   return (
@@ -638,11 +653,12 @@ const SingleDay = (props: SingleDayProps) => {
       onPress={props.onPress}
       className="h-full flex-1 aspect-auto rounded-xl items-center justify-between py-1"
       style={{
-        backgroundColor: currentTheme.primeBg,
+        backgroundColor: theme.primeBg,
       }}
     >
       <Text
-        className={`text-xl ` + (isSameMonth ? "text-black" : "text-black/50")}
+        className="text-xl"
+        style={{ color: theme.textPrimary, opacity: isSameMonth ? 1 : 0.5 }}
       >
         {props.date.getDate()}
       </Text>
@@ -651,7 +667,7 @@ const SingleDay = (props: SingleDayProps) => {
       {props.hasEvents && (
         <View
           className="w-2 h-2 rounded-full"
-          style={{ backgroundColor: currentTheme.eventIndicator }}
+          style={{ backgroundColor: theme.eventIndicator }}
         />
       )}
     </Pressable>

apps/client/src/app/(tabs)/chat.tsx

@@ -7,14 +7,16 @@ import {
   Platform,
   Keyboard,
 } from "react-native";
-import currentTheme from "../../Themes";
+import { useThemeStore } from "../../stores/ThemeStore";
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { useFocusEffect } from "expo-router";
 import Header from "../../components/Header";
 import BaseBackground from "../../components/BaseBackground";
 import { FlashList } from "@shopify/flash-list";
 import { ChatService } from "../../services";
 import {
   useChatStore,
+  useAuthStore,
   chatMessageToMessageData,
   MessageData,
 } from "../../stores";
@@ -45,6 +47,7 @@ type ChatInputProps = {
 const TYPING_INDICATOR_DELAY_MS = 500;
 
 const Chat = () => {
+  const { isAuthenticated, isLoading: isAuthLoading } = useAuthStore();
   const {
     messages,
     addMessage,
@@ -68,8 +71,11 @@ const Chat = () => {
     return () => keyboardDidShow.remove();
   }, []);
 
-  // Load existing messages from database on mount
+  // Load existing messages from database once authenticated and screen is focused
-  useEffect(() => {
+  useFocusEffect(
+    useCallback(() => {
+      if (isAuthLoading || !isAuthenticated) return;
+
       const fetchMessages = async () => {
         try {
           const conversationSummaries = await ChatService.getConversations();
@@ -88,7 +94,8 @@ const Chat = () => {
         }
       };
       fetchMessages();
-  }, []);
+    }, [isAuthLoading, isAuthenticated]),
+  );
 
   const scrollToEnd = () => {
     setTimeout(() => {
@@ -234,20 +241,21 @@ const Chat = () => {
 };
 
 const ChatHeader = () => {
+  const { theme } = useThemeStore();
   return (
     <Header className="flex flex-row items-center">
       <View
         className="ml-3 w-12 h-12 rounded-3xl border border-solid"
         style={{
-          backgroundColor: currentTheme.placeholderBg,
+          backgroundColor: theme.placeholderBg,
-          borderColor: currentTheme.primeFg,
+          borderColor: theme.primeFg,
         }}
       ></View>
-      <Text className="text-lg pl-3">CalChat</Text>
+      <Text className="text-lg pl-3" style={{ color: theme.textPrimary }}>CalChat</Text>
       <View
         className="h-2 bg-black"
         style={{
-          shadowColor: "#000",
+          shadowColor: theme.shadowColor,
           shadowOffset: {
             width: 0,
             height: 5,
@@ -266,6 +274,7 @@ const MIN_INPUT_HEIGHT = 40;
 const MAX_INPUT_HEIGHT = 150;
 
 const ChatInput = ({ onSend }: ChatInputProps) => {
+  const { theme } = useThemeStore();
   const [text, setText] = useState("");
 
   const handleSend = () => {
@@ -280,7 +289,8 @@ const ChatInput = ({ onSend }: ChatInputProps) => {
       <TextInput
         className="flex-1 border border-solid rounded-2xl px-3 py-2 mr-2"
         style={{
-          backgroundColor: currentTheme.messageBorderBg,
+          backgroundColor: theme.messageBorderBg,
+          color: theme.textPrimary,
           minHeight: MIN_INPUT_HEIGHT,
           maxHeight: MAX_INPUT_HEIGHT,
           textAlignVertical: "top",
@@ -288,14 +298,14 @@ const ChatInput = ({ onSend }: ChatInputProps) => {
         onChangeText={setText}
         value={text}
         placeholder="Nachricht..."
-        placeholderTextColor="#999"
+        placeholderTextColor={theme.textMuted}
         multiline
       />
       <Pressable onPress={handleSend}>
         <View
           className="w-10 h-10 rounded-full items-center justify-center"
           style={{
-            backgroundColor: currentTheme.placeholderBg,
+            backgroundColor: theme.placeholderBg,
           }}
         />
       </Pressable>
@@ -310,6 +320,7 @@ const ChatMessage = ({
   onConfirm,
   onReject,
 }: ChatMessageProps) => {
+  const { theme } = useThemeStore();
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const hasProposals = proposedChanges && proposedChanges.length > 0;
@@ -333,7 +344,7 @@ const ChatMessage = ({
         minWidth: hasProposals ? "75%" : undefined,
       }}
     >
-      <Text className="p-2">{content}</Text>
+      <Text className="p-2" style={{ color: theme.textPrimary }}>{content}</Text>
 
       {hasProposals && currentProposal && onConfirm && onReject && (
         <View>
@@ -350,7 +361,7 @@ const ChatMessage = ({
                 <Ionicons
                   name="chevron-back"
                   size={24}
-                  color={currentTheme.primeFg}
+                  color={theme.primeFg}
                 />
               </Pressable>
             )}
@@ -375,7 +386,7 @@ const ChatMessage = ({
                 <Ionicons
                   name="chevron-forward"
                   size={24}
-                  color={currentTheme.primeFg}
+                  color={theme.primeFg}
                 />
               </Pressable>
             )}
@@ -385,7 +396,7 @@ const ChatMessage = ({
           {hasMultiple && (
             <Text
               className="text-center text-sm pb-2"
-              style={{ color: currentTheme.textSecondary || "#666" }}
+              style={{ color: theme.textSecondary || "#666" }}
             >
               Event {currentIndex + 1} von {proposedChanges.length}
             </Text>

apps/client/src/app/(tabs)/settings.tsx

@@ -0,0 +1,60 @@
+import { Text, View } from "react-native";
+import BaseBackground from "../../components/BaseBackground";
+import BaseButton from "../../components/BaseButton";
+import { useThemeStore } from "../../stores/ThemeStore";
+import { AuthService } from "../../services/AuthService";
+import { router } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import Header from "../../components/Header";
+import { THEMES } from "../../Themes";
+
+const handleLogout = async () => {
+  await AuthService.logout();
+  router.replace("/login");
+};
+
+const Settings = () => {
+  const { theme, setTheme } = useThemeStore();
+
+  return (
+    <BaseBackground>
+      <Header>
+        <View className="h-full flex justify-center">
+          <Text className="text-center text-3xl font-bold">Settings</Text>
+        </View>
+      </Header>
+      <View className="flex items-center mt-4">
+        <BaseButton onPress={handleLogout} solid={true}>
+          <Ionicons name="log-out-outline" size={24} color={theme.primeFg} />{" "}
+          Logout
+        </BaseButton>
+        <View>
+          <Text
+            className="text-center text-2xl"
+            style={{ color: theme.textPrimary }}
+          >
+            Select Theme
+          </Text>
+        </View>
+        <BaseButton
+          solid={theme == THEMES.defaultLight}
+          onPress={() => {
+            setTheme("defaultLight");
+          }}
+        >
+          Default Light
+        </BaseButton>
+        <BaseButton
+          solid={theme == THEMES.defaultDark}
+          onPress={() => {
+            setTheme("defaultDark");
+          }}
+        >
+          Default Dark
+        </BaseButton>
+      </View>
+    </BaseBackground>
+  );
+};
+
+export default Settings;

apps/client/src/app/event/[id].tsx

@@ -1,9 +1,11 @@
 import { View, Text, TextInput, Pressable } from "react-native";
 import { useLocalSearchParams } from "expo-router";
 import BaseBackground from "../../components/BaseBackground";
+import { useThemeStore } from "../../stores/ThemeStore";
 
 const EventDetailScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
+  const { theme } = useThemeStore();
 
   // TODO: Fetch event by id using EventService.getById()
   // TODO: Display event details (title, description, start/end time)
@@ -17,23 +19,27 @@ const EventDetailScreen = () => {
   return (
     <BaseBackground>
       <View className="flex-1 p-4">
-        <Text className="text-2xl mb-4">Event Detail</Text>
+        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>Event Detail</Text>
-        <Text className="text-gray-500 mb-4">ID: {id}</Text>
+        <Text className="mb-4" style={{ color: theme.textSecondary }}>ID: {id}</Text>
         <TextInput
           placeholder="Title"
+          placeholderTextColor={theme.textMuted}
           className="w-full border rounded p-2 mb-4"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
         />
         <TextInput
           placeholder="Description"
+          placeholderTextColor={theme.textMuted}
           multiline
           className="w-full border rounded p-2 mb-4 h-24"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
         />
         <View className="flex-row gap-2">
-          <Pressable className="bg-blue-500 p-3 rounded flex-1">
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.confirmButton }}>
-            <Text className="text-white text-center">Save</Text>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Save</Text>
           </Pressable>
-          <Pressable className="bg-red-500 p-3 rounded flex-1">
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.rejectButton }}>
-            <Text className="text-white text-center">Delete</Text>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Delete</Text>
           </Pressable>
         </View>
       </View>

apps/client/src/app/index.tsx

@@ -1,34 +1,6 @@
-import { useEffect } from "react";
-import { View, ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
-import { useAuthStore } from "../stores";
-import currentTheme from "../Themes";
 
 export default function Index() {
-  const { isAuthenticated, isLoading, loadStoredUser } = useAuthStore();
+  // AuthGuard in (tabs)/_layout.tsx handles authentication
-
-  useEffect(() => {
-    loadStoredUser();
-  }, [loadStoredUser]);
-
-  if (isLoading) {
-    return (
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: currentTheme.primeBg,
-        }}
-      >
-        <ActivityIndicator size="large" color={currentTheme.chatBot} />
-      </View>
-    );
-  }
-
-  if (isAuthenticated) {
   return <Redirect href="/(tabs)/chat" />;
-  }
-
-  return <Redirect href="/login" />;
 }

apps/client/src/app/login.tsx

@@ -4,9 +4,10 @@ import { Link, router } from "expo-router";
 import BaseBackground from "../components/BaseBackground";
 import AuthButton from "../components/AuthButton";
 import { AuthService } from "../services";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 
 const LoginScreen = () => {
+  const { theme } = useThemeStore();
   const [identifier, setIdentifier] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -36,44 +37,44 @@ const LoginScreen = () => {
       <View className="flex-1 justify-center items-center p-8">
         <Text
           className="text-3xl font-bold mb-8"
-          style={{ color: currentTheme.textPrimary }}
+          style={{ color: theme.textPrimary }}
         >
           Anmelden
         </Text>
 
         {error && (
-          <Text className="mb-4 text-center" style={{ color: currentTheme.rejectButton }}>
+          <Text className="mb-4 text-center" style={{ color: theme.rejectButton }}>
             {error}
           </Text>
         )}
 
         <TextInput
           placeholder="E-Mail oder Benutzername"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
           value={identifier}
           onChangeText={setIdentifier}
           autoCapitalize="none"
           className="w-full rounded-lg p-4 mb-4"
           style={{
-            backgroundColor: currentTheme.secondaryBg,
+            backgroundColor: theme.secondaryBg,
-            color: currentTheme.textPrimary,
+            color: theme.textPrimary,
             borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
           }}
         />
 
         <TextInput
           placeholder="Passwort"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
           value={password}
           onChangeText={setPassword}
           secureTextEntry
           className="w-full rounded-lg p-4 mb-6"
           style={{
-            backgroundColor: currentTheme.secondaryBg,
+            backgroundColor: theme.secondaryBg,
-            color: currentTheme.textPrimary,
+            color: theme.textPrimary,
             borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
           }}
         />
 
@@ -85,7 +86,7 @@ const LoginScreen = () => {
 
         <Link href="/register" asChild>
           <Pressable>
-            <Text style={{ color: currentTheme.chatBot }}>
+            <Text style={{ color: theme.chatBot }}>
               Noch kein Konto? Registrieren
             </Text>
           </Pressable>

apps/client/src/app/note/[id].tsx

@@ -1,9 +1,11 @@
 import { View, Text, TextInput, Pressable } from "react-native";
 import { useLocalSearchParams } from "expo-router";
 import BaseBackground from "../../components/BaseBackground";
+import { useThemeStore } from "../../stores/ThemeStore";
 
 const NoteScreen = () => {
   const { id } = useLocalSearchParams<{ id: string }>();
+  const { theme } = useThemeStore();
 
   // TODO: Fetch event by id using EventService.getById()
   // TODO: Display and edit the event's note field
@@ -15,16 +17,18 @@ const NoteScreen = () => {
   return (
     <BaseBackground>
       <View className="flex-1 p-4">
-        <Text className="text-2xl mb-4">Note</Text>
+        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>Note</Text>
-        <Text className="text-gray-500 mb-4">Event ID: {id}</Text>
+        <Text className="mb-4" style={{ color: theme.textSecondary }}>Event ID: {id}</Text>
         <TextInput
           placeholder="Write your note here..."
+          placeholderTextColor={theme.textMuted}
           multiline
           className="w-full border rounded p-2 flex-1 mb-4"
           textAlignVertical="top"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
         />
-        <Pressable className="bg-blue-500 p-3 rounded">
+        <Pressable className="p-3 rounded" style={{ backgroundColor: theme.confirmButton }}>
-          <Text className="text-white text-center">Save Note</Text>
+          <Text className="text-center" style={{ color: theme.buttonText }}>Save Note</Text>
         </Pressable>
       </View>
     </BaseBackground>

apps/client/src/app/register.tsx

@@ -4,11 +4,12 @@ import { Link, router } from "expo-router";
 import BaseBackground from "../components/BaseBackground";
 import AuthButton from "../components/AuthButton";
 import { AuthService } from "../services";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
 const RegisterScreen = () => {
+  const { theme } = useThemeStore();
   const [email, setEmail] = useState("");
   const [userName, setUserName] = useState("");
   const [password, setPassword] = useState("");
@@ -44,60 +45,60 @@ const RegisterScreen = () => {
       <View className="flex-1 justify-center items-center p-8">
         <Text
           className="text-3xl font-bold mb-8"
-          style={{ color: currentTheme.textPrimary }}
+          style={{ color: theme.textPrimary }}
         >
           Registrieren
         </Text>
 
         {error && (
-          <Text className="mb-4 text-center" style={{ color: currentTheme.rejectButton }}>
+          <Text className="mb-4 text-center" style={{ color: theme.rejectButton }}>
             {error}
           </Text>
         )}
 
         <TextInput
           placeholder="E-Mail"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
           value={email}
           onChangeText={setEmail}
           autoCapitalize="none"
           keyboardType="email-address"
           className="w-full rounded-lg p-4 mb-4"
           style={{
-            backgroundColor: currentTheme.secondaryBg,
+            backgroundColor: theme.secondaryBg,
-            color: currentTheme.textPrimary,
+            color: theme.textPrimary,
             borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
           }}
         />
 
         <TextInput
           placeholder="Benutzername"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
           value={userName}
           onChangeText={setUserName}
           autoCapitalize="none"
           className="w-full rounded-lg p-4 mb-4"
           style={{
-            backgroundColor: currentTheme.secondaryBg,
+            backgroundColor: theme.secondaryBg,
-            color: currentTheme.textPrimary,
+            color: theme.textPrimary,
             borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
           }}
         />
 
         <TextInput
           placeholder="Passwort"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
           value={password}
           onChangeText={setPassword}
           secureTextEntry
           className="w-full rounded-lg p-4 mb-6"
           style={{
-            backgroundColor: currentTheme.secondaryBg,
+            backgroundColor: theme.secondaryBg,
-            color: currentTheme.textPrimary,
+            color: theme.textPrimary,
             borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
           }}
         />
 
@@ -109,7 +110,7 @@ const RegisterScreen = () => {
 
         <Link href="/login" asChild>
           <Pressable>
-            <Text style={{ color: currentTheme.chatBot }}>
+            <Text style={{ color: theme.chatBot }}>
               Bereits ein Konto? Anmelden
             </Text>
           </Pressable>

apps/client/src/components/AuthButton.tsx

@@ -1,5 +1,5 @@
 import { Pressable, Text, ActivityIndicator } from "react-native";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 
 interface AuthButtonProps {
   title: string;
@@ -8,6 +8,7 @@ interface AuthButtonProps {
 }
 
 const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
+  const { theme } = useThemeStore();
   return (
     <Pressable
       onPress={onPress}
@@ -15,9 +16,9 @@ const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
       className="w-full rounded-lg p-4 mb-4 border-4"
       style={{
         backgroundColor: isLoading
-          ? currentTheme.disabledButton
+          ? theme.disabledButton
-          : currentTheme.chatBot,
+          : theme.chatBot,
-        shadowColor: "#000",
+        shadowColor: theme.shadowColor,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.25,
         shadowRadius: 3.84,
@@ -25,11 +26,11 @@ const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
       }}
     >
       {isLoading ? (
-        <ActivityIndicator color={currentTheme.buttonText} />
+        <ActivityIndicator color={theme.buttonText} />
       ) : (
         <Text
           className="text-center font-semibold text-lg"
-          style={{ color: currentTheme.buttonText }}
+          style={{ color: theme.buttonText }}
         >
           {title}
         </Text>

apps/client/src/components/AuthGuard.tsx

@@ -0,0 +1,46 @@
+import { useEffect, ReactNode } from "react";
+import { View, ActivityIndicator } from "react-native";
+import { Redirect } from "expo-router";
+import { useAuthStore } from "../stores";
+import { useThemeStore } from "../stores/ThemeStore";
+
+type AuthGuardProps = {
+  children: ReactNode;
+};
+
+/**
+ * Wraps content that requires authentication.
+ * - Loads stored user on mount
+ * - Shows loading indicator while checking auth state
+ * - Redirects to login if not authenticated
+ * - Renders children if authenticated
+ */
+export const AuthGuard = ({ children }: AuthGuardProps) => {
+  const { theme } = useThemeStore();
+  const { isAuthenticated, isLoading, loadStoredUser } = useAuthStore();
+
+  useEffect(() => {
+    loadStoredUser();
+  }, [loadStoredUser]);
+
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: theme.primeBg,
+        }}
+      >
+        <ActivityIndicator size="large" color={theme.chatBot} />
+      </View>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Redirect href="/login" />;
+  }
+
+  return <>{children}</>;
+};

apps/client/src/components/BaseBackground.tsx

@@ -1,5 +1,5 @@
 import { View } from "react-native";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { ReactNode } from "react";
 
 type BaseBackgroundProps = {
@@ -8,11 +8,12 @@ type BaseBackgroundProps = {
 };
 
 const BaseBackground = (props: BaseBackgroundProps) => {
+  const { theme } = useThemeStore();
   return (
     <View
       className={`h-full ${props.className}`}
       style={{
-        backgroundColor: currentTheme.primeBg,
+        backgroundColor: theme.primeBg,
       }}
     >
       {props.children}

apps/client/src/components/BaseButton.tsx

@@ -0,0 +1,39 @@
+import { Pressable, Text } from "react-native";
+import { useThemeStore } from "../stores/ThemeStore";
+import { ReactNode } from "react";
+
+type BaseButtonProps = {
+  children?: ReactNode;
+  onPress: () => void;
+  solid?: boolean;
+};
+
+const BaseButton = ({children, onPress, solid = false}: BaseButtonProps) => {
+  const { theme } = useThemeStore();
+  return (
+    <Pressable
+      className="w-11/12 rounded-lg p-4 mb-4 border-4"
+      onPress={onPress}
+      style={{
+        borderColor: theme.borderPrimary,
+        backgroundColor: solid
+          ? theme.chatBot
+          : theme.primeBg,
+        shadowColor: theme.shadowColor,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+      }}
+    >
+      <Text
+        className="text-center font-semibold text-lg"
+        style={{ color: theme.buttonText }}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+};
+
+export default BaseButton;

apps/client/src/components/ChatBubble.tsx

@@ -1,5 +1,5 @@
 import { View, ViewStyle } from "react-native";
-import colors from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 
 type BubbleSide = "left" | "right";
 
@@ -11,7 +11,8 @@ type ChatBubbleProps = {
 };
 
 export function ChatBubble({ side, children, className = "", style }: ChatBubbleProps) {
-  const borderColor = side === "left" ? colors.chatBot : colors.primeFg;
+  const { theme } = useThemeStore();
+  const borderColor = side === "left" ? theme.chatBot : theme.primeFg;
   const sideClass =
     side === "left"
       ? "self-start ml-2 rounded-bl-sm"
@@ -19,8 +20,8 @@ export function ChatBubble({ side, children, className = "", style }: ChatBubble
 
   return (
     <View
-      className={`bg-white border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
+      className={`border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
-      style={[{ borderColor, elevation: 8 }, style]}
+      style={[{ borderColor, elevation: 8, backgroundColor: theme.secondaryBg }, style]}
     >
       {children}
     </View>

apps/client/src/components/EventCard.tsx

@@ -1,7 +1,7 @@
 import { View, Pressable } from "react-native";
 import { ExpandedEvent } from "@calchat/shared";
 import { Feather } from "@expo/vector-icons";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { EventCardBase } from "./EventCardBase";
 
 type EventCardProps = {
@@ -11,6 +11,7 @@ type EventCardProps = {
 };
 
 export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
+  const { theme } = useThemeStore();
   return (
     <View className="mb-3">
       <EventCardBase
@@ -27,23 +28,23 @@ export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
             className="w-10 h-10 rounded-full items-center justify-center"
             style={{
               borderWidth: 1,
-              borderColor: currentTheme.borderPrimary,
+              borderColor: theme.borderPrimary,
             }}
           >
-            <Feather name="edit-2" size={18} color={currentTheme.textPrimary} />
+            <Feather name="edit-2" size={18} color={theme.textPrimary} />
           </Pressable>
           <Pressable
             onPress={onDelete}
             className="w-10 h-10 rounded-full items-center justify-center"
             style={{
               borderWidth: 1,
-              borderColor: currentTheme.borderPrimary,
+              borderColor: theme.borderPrimary,
             }}
           >
             <Feather
               name="trash-2"
               size={18}
-              color={currentTheme.textPrimary}
+              color={theme.textPrimary}
             />
           </Pressable>
         </View>

apps/client/src/components/EventCardBase.tsx

@@ -1,7 +1,7 @@
 import { View, Text } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { ReactNode } from "react";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 
 type EventCardBaseProps = {
   className?: string;
@@ -60,34 +60,35 @@ export const EventCardBase = ({
   isRecurring,
   children,
 }: EventCardBaseProps) => {
+  const { theme } = useThemeStore();
   return (
     <View
       className={`rounded-xl overflow-hidden ${className}`}
-      style={{ borderWidth: 2, borderColor: currentTheme.borderPrimary }}
+      style={{ borderWidth: 2, borderColor: theme.borderPrimary }}
     >
       {/* Header with title */}
       <View
         className="px-3 py-2"
         style={{
-          backgroundColor: currentTheme.chatBot,
+          backgroundColor: theme.chatBot,
           borderBottomWidth: 2,
-          borderBottomColor: currentTheme.borderPrimary,
+          borderBottomColor: theme.borderPrimary,
         }}
       >
-        <Text className="font-bold text-base">{title}</Text>
+        <Text className="font-bold text-base" style={{ color: theme.textPrimary }}>{title}</Text>
       </View>
 
       {/* Content */}
-      <View className="px-3 py-2 bg-white">
+      <View className="px-3 py-2" style={{ backgroundColor: theme.secondaryBg }}>
         {/* Date */}
         <View className="flex-row items-center mb-1">
           <Feather
             name="calendar"
             size={16}
-            color={currentTheme.textPrimary}
+            color={theme.textPrimary}
             style={{ marginRight: 8 }}
           />
-          <Text style={{ color: currentTheme.textPrimary }}>
+          <Text style={{ color: theme.textPrimary }}>
             {formatDate(startTime)}
           </Text>
         </View>
@@ -97,10 +98,10 @@ export const EventCardBase = ({
           <Feather
             name="clock"
             size={16}
-            color={currentTheme.textPrimary}
+            color={theme.textPrimary}
             style={{ marginRight: 8 }}
           />
-          <Text style={{ color: currentTheme.textPrimary }}>
+          <Text style={{ color: theme.textPrimary }}>
             {formatTime(startTime)} - {formatTime(endTime)} (
             {formatDuration(startTime, endTime)})
           </Text>
@@ -112,10 +113,10 @@ export const EventCardBase = ({
             <Feather
               name="repeat"
               size={16}
-              color={currentTheme.textPrimary}
+              color={theme.textPrimary}
               style={{ marginRight: 8 }}
             />
-            <Text style={{ color: currentTheme.textPrimary }}>
+            <Text style={{ color: theme.textPrimary }}>
               Wiederkehrend
             </Text>
           </View>
@@ -124,7 +125,7 @@ export const EventCardBase = ({
         {/* Description */}
         {description && (
           <Text
-            style={{ color: currentTheme.textPrimary }}
+            style={{ color: theme.textPrimary }}
             className="text-sm mt-1"
           >
             {description}

apps/client/src/components/EventConfirmDialog.tsx

@@ -1,5 +1,6 @@
 import { View, Text, Modal, Pressable } from "react-native";
 import { CreateEventDTO } from "@calchat/shared";
+import { useThemeStore } from "../stores/ThemeStore";
 
 type EventConfirmDialogProps = {
   visible: boolean;
@@ -16,6 +17,8 @@ const EventConfirmDialog = ({
   onReject: _onReject,
   onClose: _onClose,
 }: EventConfirmDialogProps) => {
+  const { theme } = useThemeStore();
+
   // TODO: Display proposed event details (title, time, description)
   // TODO: Confirm button calls onConfirm and closes dialog
   // TODO: Reject button calls onReject and closes dialog
@@ -26,7 +29,7 @@ const EventConfirmDialog = ({
     <Modal visible={false} transparent animationType="fade">
       <View>
         <Pressable>
-          <Text>EventConfirmDialog - Not Implemented</Text>
+          <Text style={{ color: theme.textPrimary }}>EventConfirmDialog - Not Implemented</Text>
         </Pressable>
       </View>
     </Modal>

apps/client/src/components/Header.tsx

@@ -1,42 +1,28 @@
-import { View, Pressable } from "react-native";
+import { View } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
+import { useThemeStore } from "../stores/ThemeStore";
-import { router } from "expo-router";
-import currentTheme from "../Themes";
 import { ReactNode } from "react";
-import { AuthService } from "../services";
 
 type HeaderProps = {
   children?: ReactNode;
   className?: string;
 };
 
-const handleLogout = async () => {
-  await AuthService.logout();
-  router.replace("/login");
-};
-
 const Header = (props: HeaderProps) => {
+  const { theme } = useThemeStore();
   return (
     <View>
       <View
         className={`w-full h-32 pt-10 pb-4 ${props.className}`}
         style={{
-          backgroundColor: currentTheme.chatBot,
+          backgroundColor: theme.chatBot,
         }}
       >
         {props.children}
-        <Pressable
-          onPress={handleLogout}
-          className="absolute left-1 bottom-0 p-2"
-          hitSlop={8}
-        >
-          <Ionicons name="log-out-outline" size={24} color={currentTheme.primeFg} />
-        </Pressable>
       </View>
       <View
         className="h-2 bg-black"
         style={{
-          shadowColor: "#000",
+          shadowColor: theme.shadowColor,
           shadowOffset: {
             width: 0,
             height: 5,

apps/client/src/components/ProposedEventCard.tsx

@@ -1,6 +1,6 @@
 import { View, Text, Pressable } from "react-native";
 import { ProposedEventChange } from "@calchat/shared";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { EventCardBase } from "./EventCardBase";
 
 type ProposedEventCardProps = {
@@ -19,7 +19,9 @@ const ConfirmRejectButtons = ({
   respondedAction?: "confirm" | "reject";
   onConfirm: () => void;
   onReject: () => void;
-}) => (
+}) => {
+  const { theme } = useThemeStore();
+  return (
     <View className="flex-row mt-3 gap-2">
       <Pressable
         onPress={onConfirm}
@@ -27,13 +29,13 @@ const ConfirmRejectButtons = ({
         className="flex-1 py-2 rounded-lg items-center"
         style={{
           backgroundColor: isDisabled
-          ? currentTheme.disabledButton
+            ? theme.disabledButton
-          : currentTheme.confirmButton,
+            : theme.confirmButton,
           borderWidth: respondedAction === "confirm" ? 2 : 0,
-        borderColor: currentTheme.confirmButton,
+          borderColor: theme.confirmButton,
         }}
       >
-      <Text style={{ color: currentTheme.buttonText }} className="font-medium">
+        <Text style={{ color: theme.buttonText }} className="font-medium">
           Annehmen
         </Text>
       </Pressable>
@@ -43,18 +45,19 @@ const ConfirmRejectButtons = ({
         className="flex-1 py-2 rounded-lg items-center"
         style={{
           backgroundColor: isDisabled
-          ? currentTheme.disabledButton
+            ? theme.disabledButton
-          : currentTheme.rejectButton,
+            : theme.rejectButton,
           borderWidth: respondedAction === "reject" ? 2 : 0,
-        borderColor: currentTheme.rejectButton,
+          borderColor: theme.rejectButton,
         }}
       >
-      <Text style={{ color: currentTheme.buttonText }} className="font-medium">
+        <Text style={{ color: theme.buttonText }} className="font-medium">
           Ablehnen
         </Text>
       </Pressable>
     </View>
-);
+  );
+};
 
 export const ProposedEventCard = ({
   proposedChange,

apps/client/src/components/TypingIndicator.tsx

@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
 import { Text } from "react-native";
-import colors from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { ChatBubble } from "./ChatBubble";
 
 const DOTS = [".", "..", "..."];
 const INTERVAL_MS = 400;
 
 export default function TypingIndicator() {
+  const { theme } = useThemeStore();
   const [dotIndex, setDotIndex] = useState(0);
 
   useEffect(() => {
@@ -21,7 +22,7 @@ export default function TypingIndicator() {
     <ChatBubble side="left" className="px-4 py-2">
       <Text
         className="text-lg font-bold tracking-widest"
-        style={{ color: colors.textMuted }}
+        style={{ color: theme.textMuted }}
       >
         {DOTS[dotIndex]}
       </Text>

apps/client/src/services/ApiClient.ts

@@ -55,7 +55,12 @@ async function request<T>(
     }
 
     apiLogger.debug(`${method} ${endpoint} - ${response.status} (${duration}ms)`);
-    return response.json();
+
+    const text = await response.text();
+    if (!text) {
+      return undefined as T;
+    }
+    return JSON.parse(text);
   } catch (error) {
     const duration = Math.round(performance.now() - start);
     apiLogger.error(`${method} ${endpoint} failed (${duration}ms): ${error}`);

apps/client/src/stores/ThemeStore.ts

@@ -0,0 +1,12 @@
+import { create } from "zustand";
+import { Theme, THEMES } from "../Themes";
+
+interface ThemeState {
+  theme: Theme;
+  setTheme: (themeName: keyof typeof THEMES) => void;
+}
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  theme: THEMES.defaultLight,
+  setTheme: (themeName) => set({theme: THEMES[themeName]})
+}))