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

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}