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/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>