feat: add theme system with light/dark mode support

- Add ThemeStore (Zustand) for reactive theme switching - Add Themes.tsx with THEMES object (defaultLight, defaultDark) - Add Settings screen with theme switcher and logout button - Add BaseButton component for reusable themed buttons - Migrate all components from static currentTheme to useThemeStore() - Add shadowColor to theme (iOS only, Android uses elevation) - All text elements now use theme colors (textPrimary, textSecondary, etc.) - Update tab navigation to include Settings tab - Move logout from Header to Settings screen
2026-01-24 16:57:33 +01:00
parent 1dbca79edd
commit 43d40b46d7
23 changed files with 450 additions and 236 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -72,24 +72,26 @@ 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
-│   ├── Header.tsx              # Header component with logout button
-│   ├── AuthButton.tsx          # Reusable button for auth screens (with shadow)
+│   ├── BaseBackground.tsx      # Common screen wrapper (themed)
+│   ├── 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)
@@ -104,10 +106,47 @@ 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.
+
+### 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)

@@ -376,10 +415,16 @@ NODE_ENV=development        # development = pretty logs, production = JSON
  - `ApiClient`: Automatically injects X-User-Id header for authenticated requests
  - Login screen: Supports email OR userName login
  - Register screen: Email validation, checks for existing email/userName
-  - `AuthButton`: Reusable button component with shadow effect
-  - `Header`: Contains logout button on all screens
+  - `AuthButton`: Reusable button component with themed shadow
+  - `Header`: Themed header component (logout moved to Settings)
  - `index.tsx`: Auth redirect - checks stored user on app start
- Tab navigation (Chat, Calendar) implemented with basic UI
+- **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)
@@ -404,9 +449,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
--- a/apps/client/app.json
+++ b/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"
  }
 }
--- a/apps/client/src/Themes.tsx
+++ b/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",
-};
-
-let currentTheme: Theme = defaultLight;
-export default currentTheme;
+    shadowColor: "#000000",
+  },
+  defaultDark: {
+    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>;
--- a/apps/client/src/app/(tabs)/_layout.tsx
+++ b/apps/client/src/app/(tabs)/_layout.tsx
@@ -1,8 +1,9 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import theme from "../../Themes";
+import { useThemeStore } from "../../stores/ThemeStore";

 export default function TabLayout() {
+  const { theme } = useThemeStore();
  return (
    <Tabs
      screenOptions={{
@@ -30,6 +31,15 @@ export default function TabLayout() {
          ),
        }}
      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={28} name="settings" color={color} />
+          ),
+        }}
+      />
    </Tabs>
  );
 }
--- a/apps/client/src/app/(tabs)/calendar.tsx
+++ b/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";
@@ -226,6 +226,7 @@ const EventOverlay = ({
  onEditEvent,
  onDeleteEvent,
 }: EventOverlayProps) => {
+  const { theme } = useThemeStore();
  if (!date) return null;

  const dateString = date.toLocaleDateString("de-DE", {
@@ -250,9 +251,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 +261,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>
+            <Text className="font-bold text-lg" style={{ color: theme.textPrimary }}>{dateString}</Text>
+            <Text style={{ color: theme.textPrimary }}>
              {events.length} {events.length === 1 ? "Termin" : "Termine"}
            </Text>
          </View>
@@ -289,10 +290,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 +320,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 +399,11 @@ const MonthSelector = ({
        style={{
          backgroundColor:
            item.monthIndex % 2 === 0
-              ? currentTheme.primeBg
-              : currentTheme.secondaryBg,
+              ? theme.primeBg
+              : theme.secondaryBg,
        }}
      >
-        <Text className="text-xl" style={{ color: currentTheme.primeFg }}>
+        <Text className="text-xl" style={{ color: theme.primeFg }}>
          {item.label}
        </Text>
      </View>
@@ -423,9 +425,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 +459,7 @@ type CalendarHeaderProps = {
 };

 const CalendarHeader = (props: CalendarHeaderProps) => {
+  const { theme } = useThemeStore();
  const [modalVisible, setModalVisible] = useState(false);
  const [dropdownPosition, setDropdownPosition] = useState({
    top: 0,
@@ -482,16 +485,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,
-            backgroundColor: currentTheme.chatBot,
+            borderColor: theme.primeFg,
+            backgroundColor: theme.chatBot,
            // iOS shadow
-            shadowColor: "#000",
+            shadowColor: theme.shadowColor,
            shadowOffset: { width: 0, height: 3 },
            shadowOpacity: 0.35,
            shadowRadius: 5,
@@ -503,7 +506,7 @@ const CalendarHeader = (props: CalendarHeaderProps) => {
          <Ionicons
            name="chevron-down"
            size={28}
-            color={currentTheme.primeFg}
+            color={theme.primeFg}
          />
        </Pressable>
      </View>
@@ -528,15 +531,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,
-      borderColor: currentTheme.primeFg,
+        backgroundColor: theme.chatBot,
+        borderColor: theme.primeFg,
        // iOS shadow
-      shadowColor: "#000",
+        shadowColor: theme.shadowColor,
        shadowOffset: { width: 0, height: 4 },
        shadowOpacity: 0.3,
        shadowRadius: 8,
@@ -547,7 +552,7 @@ 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,
@@ -555,15 +560,19 @@ const ChangeMonthButton = (props: ChangeMonthButtonProps) => (
      />
    </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 +582,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);
@@ -595,7 +605,7 @@ const CalendarGrid = (props: CalendarGridProps) => {
    <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 +641,7 @@ type SingleDayProps = {
 };

 const SingleDay = (props: SingleDayProps) => {
+  const { theme } = useThemeStore();
  const isSameMonth = MONTHS[props.date.getMonth()] === props.month;

  return (
@@ -638,11 +649,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 +663,7 @@ const SingleDay = (props: SingleDayProps) => {
      {props.hasEvents && (
        <View
          className="w-2 h-2 rounded-full"
-          style={{ backgroundColor: currentTheme.eventIndicator }}
+          style={{ backgroundColor: theme.eventIndicator }}
        />
      )}
    </Pressable>
--- a/apps/client/src/app/(tabs)/chat.tsx
+++ b/apps/client/src/app/(tabs)/chat.tsx
@@ -7,7 +7,7 @@ import {
  Platform,
  Keyboard,
 } from "react-native";
-import currentTheme from "../../Themes";
+import { useThemeStore } from "../../stores/ThemeStore";
 import React, { useState, useRef, useEffect } from "react";
 import Header from "../../components/Header";
 import BaseBackground from "../../components/BaseBackground";
@@ -234,20 +234,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,
-          borderColor: currentTheme.primeFg,
+          backgroundColor: theme.placeholderBg,
+          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 +267,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 +282,7 @@ 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,
          minHeight: MIN_INPUT_HEIGHT,
          maxHeight: MAX_INPUT_HEIGHT,
          textAlignVertical: "top",
@@ -288,14 +290,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 +312,7 @@ const ChatMessage = ({
  onConfirm,
  onReject,
 }: ChatMessageProps) => {
+  const { theme } = useThemeStore();
  const [currentIndex, setCurrentIndex] = useState(0);

  const hasProposals = proposedChanges && proposedChanges.length > 0;
@@ -333,7 +336,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 +353,7 @@ const ChatMessage = ({
                <Ionicons
                  name="chevron-back"
                  size={24}
-                  color={currentTheme.primeFg}
+                  color={theme.primeFg}
                />
              </Pressable>
            )}
@@ -375,7 +378,7 @@ const ChatMessage = ({
                <Ionicons
                  name="chevron-forward"
                  size={24}
-                  color={currentTheme.primeFg}
+                  color={theme.primeFg}
                />
              </Pressable>
            )}
@@ -385,7 +388,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>
--- a/apps/client/src/app/(tabs)/settings.tsx
+++ b/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;
--- a/apps/client/src/app/event/[id].tsx
+++ b/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-gray-500 mb-4">ID: {id}</Text>
+        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>Event Detail</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">
-            <Text className="text-white text-center">Save</Text>
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.confirmButton }}>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Save</Text>
          </Pressable>
-          <Pressable className="bg-red-500 p-3 rounded flex-1">
-            <Text className="text-white text-center">Delete</Text>
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.rejectButton }}>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Delete</Text>
          </Pressable>
        </View>
      </View>
--- a/apps/client/src/app/index.tsx
+++ b/apps/client/src/app/index.tsx
@@ -2,10 +2,11 @@ import { useEffect } from "react";
 import { View, ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
 import { useAuthStore } from "../stores";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";

 export default function Index() {
  const { isAuthenticated, isLoading, loadStoredUser } = useAuthStore();
+  const { theme } = useThemeStore();

  useEffect(() => {
    loadStoredUser();
@@ -18,10 +19,10 @@ export default function Index() {
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
-          backgroundColor: currentTheme.primeBg,
+          backgroundColor: theme.primeBg,
        }}
      >
-        <ActivityIndicator size="large" color={currentTheme.chatBot} />
+        <ActivityIndicator size="large" color={theme.chatBot} />
      </View>
    );
  }
--- a/apps/client/src/app/login.tsx
+++ b/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,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            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,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            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>
--- a/apps/client/src/app/note/[id].tsx
+++ b/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-gray-500 mb-4">Event ID: {id}</Text>
+        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>Note</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">
-          <Text className="text-white text-center">Save Note</Text>
+        <Pressable className="p-3 rounded" style={{ backgroundColor: theme.confirmButton }}>
+          <Text className="text-center" style={{ color: theme.buttonText }}>Save Note</Text>
        </Pressable>
      </View>
    </BaseBackground>
--- a/apps/client/src/app/register.tsx
+++ b/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,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            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,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            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,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            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>
--- a/apps/client/src/components/AuthButton.tsx
+++ b/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
-          : currentTheme.chatBot,
-        shadowColor: "#000",
+          ? theme.disabledButton
+          : theme.chatBot,
+        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>
--- a/apps/client/src/components/BaseBackground.tsx
+++ b/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}
--- a/apps/client/src/components/BaseButton.tsx
+++ b/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;
--- a/apps/client/src/components/ChatBubble.tsx
+++ b/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}`}
-      style={[{ borderColor, elevation: 8 }, style]}
+      className={`border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
+      style={[{ borderColor, elevation: 8, backgroundColor: theme.secondaryBg }, style]}
    >
      {children}
    </View>
--- a/apps/client/src/components/EventCard.tsx
+++ b/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>
--- a/apps/client/src/components/EventCardBase.tsx
+++ b/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}
--- a/apps/client/src/components/EventConfirmDialog.tsx
+++ b/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>
--- a/apps/client/src/components/Header.tsx
+++ b/apps/client/src/components/Header.tsx
@@ -1,42 +1,28 @@
-import { View, Pressable } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import currentTheme from "../Themes";
+import { View } from "react-native";
+import { useThemeStore } from "../stores/ThemeStore";
 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,
--- a/apps/client/src/components/ProposedEventCard.tsx
+++ b/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
-          : currentTheme.confirmButton,
+            ? theme.disabledButton
+            : 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
-          : currentTheme.rejectButton,
+            ? theme.disabledButton
+            : 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,
--- a/apps/client/src/components/TypingIndicator.tsx
+++ b/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>
--- a/apps/client/src/stores/ThemeStore.ts
+++ b/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]})
+}))