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/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,26 +15,46 @@ type Theme = {
  textMuted: string;
  eventIndicator: string;
  borderPrimary: string;
+  shadowColor: string;
 };

-const defaultLight: Theme = {
-  chatBot: "#DE6C20",
-  primeFg: "#3B3329",
-  primeBg: "#FFEEDE",
-  secondaryBg: "#FFFFFF",
-  messageBorderBg: "#FFFFFF",
-  placeholderBg: "#D9D9D9",
-  calenderBg: "#FBD5B2",
-  confirmButton: "#22c55e",
-  rejectButton: "#ef4444",
-  disabledButton: "#ccc",
-  buttonText: "#000000",
-  textPrimary: "#000000",
-  textSecondary: "#666",
-  textMuted: "#888",
-  eventIndicator: "#DE6C20",
-  borderPrimary: "#000000",
-};
-
-let currentTheme: Theme = defaultLight;
-export default currentTheme;
+export const THEMES = {
+  defaultLight: {
+    chatBot: "#DE6C20",
+    primeFg: "#3B3329",
+    primeBg: "#FFEEDE",
+    secondaryBg: "#FFFFFF",
+    messageBorderBg: "#FFFFFF",
+    placeholderBg: "#D9D9D9",
+    calenderBg: "#FBD5B2",
+    confirmButton: "#22c55e",
+    rejectButton: "#ef4444",
+    disabledButton: "#ccc",
+    buttonText: "#000000",
+    textPrimary: "#000000",
+    textSecondary: "#666",
+    textMuted: "#888",
+    eventIndicator: "#DE6C20",
+    borderPrimary: "#000000",
+    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,42 +531,48 @@ type ChangeMonthButtonProps = {
  icon: "chevron-back" | "chevron-forward";
 };

-const ChangeMonthButton = (props: ChangeMonthButtonProps) => (
-  <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,
-      // iOS shadow
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.3,
-      shadowRadius: 8,
-      // Android shadow
-      elevation: 6,
-    }}
-  >
-    <Ionicons
-      name={props.icon}
-      size={48}
-      color={currentTheme.primeFg}
+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={{
-        marginLeft: props.icon === "chevron-forward" ? 4 : 0,
-        marginRight: props.icon === "chevron-back" ? 4 : 0,
+        backgroundColor: theme.chatBot,
+        borderColor: theme.primeFg,
+        // iOS shadow
+        shadowColor: theme.shadowColor,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        // Android shadow
+        elevation: 6,
      }}
-    />
-  </Pressable>
-);
+    >
+      <Ionicons
+        name={props.icon}
+        size={48}
+        color={theme.primeFg}
+        style={{
+          marginLeft: props.icon === "chevron-forward" ? 4 : 0,
+          marginRight: props.icon === "chevron-back" ? 4 : 0,
+        }}
+      />
+    </Pressable>
+  );
+};

-const WeekDaysLine = () => (
-  <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>
-    ))}
-  </View>
-);
+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} 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,42 +19,45 @@ const ConfirmRejectButtons = ({
  respondedAction?: "confirm" | "reject";
  onConfirm: () => void;
  onReject: () => void;
-}) => (
-  <View className="flex-row mt-3 gap-2">
-    <Pressable
-      onPress={onConfirm}
-      disabled={isDisabled}
-      className="flex-1 py-2 rounded-lg items-center"
-      style={{
-        backgroundColor: isDisabled
-          ? currentTheme.disabledButton
-          : currentTheme.confirmButton,
-        borderWidth: respondedAction === "confirm" ? 2 : 0,
-        borderColor: currentTheme.confirmButton,
-      }}
-    >
-      <Text style={{ color: currentTheme.buttonText }} className="font-medium">
-        Annehmen
-      </Text>
-    </Pressable>
-    <Pressable
-      onPress={onReject}
-      disabled={isDisabled}
-      className="flex-1 py-2 rounded-lg items-center"
-      style={{
-        backgroundColor: isDisabled
-          ? currentTheme.disabledButton
-          : currentTheme.rejectButton,
-        borderWidth: respondedAction === "reject" ? 2 : 0,
-        borderColor: currentTheme.rejectButton,
-      }}
-    >
-      <Text style={{ color: currentTheme.buttonText }} className="font-medium">
-        Ablehnen
-      </Text>
-    </Pressable>
-  </View>
-);
+}) => {
+  const { theme } = useThemeStore();
+  return (
+    <View className="flex-row mt-3 gap-2">
+      <Pressable
+        onPress={onConfirm}
+        disabled={isDisabled}
+        className="flex-1 py-2 rounded-lg items-center"
+        style={{
+          backgroundColor: isDisabled
+            ? theme.disabledButton
+            : theme.confirmButton,
+          borderWidth: respondedAction === "confirm" ? 2 : 0,
+          borderColor: theme.confirmButton,
+        }}
+      >
+        <Text style={{ color: theme.buttonText }} className="font-medium">
+          Annehmen
+        </Text>
+      </Pressable>
+      <Pressable
+        onPress={onReject}
+        disabled={isDisabled}
+        className="flex-1 py-2 rounded-lg items-center"
+        style={{
+          backgroundColor: isDisabled
+            ? theme.disabledButton
+            : theme.rejectButton,
+          borderWidth: respondedAction === "reject" ? 2 : 0,
+          borderColor: theme.rejectButton,
+        }}
+      >
+        <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]})
+}))