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
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user