Feat/UI theme refresh darkmode

frontend/src/app/App.tsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useAuthStore } from "../store/authStore";
 import { ThemeProvider } from "./providers/ThemeProvider";
 import { RouterProvider } from "./providers/RouterProvider";
+import "./calendarTheme.css";
 
 function App() {
     const fetchUser = useAuthStore((s) => s.fetchUser);

frontend/src/app/calendarTheme.css

@@ -0,0 +1,29 @@
+/* Dark-mode friendly FullCalendar tweaks */
+body.taskraum-dark .fc {
+  --fc-page-bg-color: #0f1426;
+  --fc-neutral-bg-color: rgba(148, 163, 184, 0.08);
+  --fc-border-color: rgba(148, 163, 184, 0.16);
+  --fc-neutral-text-color: #a8b3cf;
+  --fc-button-text-color: #e5e7eb;
+  --fc-button-bg-color: #1f2937;
+  --fc-button-border-color: rgba(255,255,255,0.1);
+  --fc-button-hover-bg-color: #2b3244;
+  --fc-button-hover-border-color: rgba(255,255,255,0.2);
+  --fc-button-active-bg-color: #374151;
+  --fc-today-bg-color: rgba(79, 70, 229, 0.12);
+  --fc-event-text-color: #e5e7eb;
+}
+
+body.taskraum-dark .fc .fc-col-header-cell-cushion,
+body.taskraum-dark .fc .fc-daygrid-day-number {
+  color: #a8b3cf;
+}
+
+body.taskraum-dark .fc .fc-daygrid-day.fc-day-today {
+  background-color: rgba(79, 70, 229, 0.12);
+}
+
+body.taskraum-dark .fc .fc-event {
+  border: none;
+  box-shadow: 0 0 0 1px rgba(0,0,0,0.07);
+}

frontend/src/app/providers/ColorModeContext.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+
+export type Mode = "light" | "dark";
+
+export const ColorModeContext = createContext<{
+  mode: Mode;
+  toggleColorMode: () => void;
+}>({
+  mode: "light",
+  toggleColorMode: () => {
+  },
+});

frontend/src/app/providers/ThemeProvider.tsx

@@ -1,34 +1,64 @@
-import type {ReactNode} from "react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { ThemeProvider as MuiThemeProvider, CssBaseline } from "@mui/material";
 import { createTheme } from "@mui/material/styles";
+import { ColorModeContext, type Mode } from "./ColorModeContext";
 
-const theme = createTheme({
-    palette: {
-        mode: "light",
-        primary: { main: "#4f46e5" },
-        background: { default: "#ffffff", paper: "#ffffff" },
-        text: { primary: "#213547", secondary: "#4b5563" },
-    },
-    typography: {
-        fontFamily:
-            'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"',
-    },
-    components: {
-        MuiCssBaseline: {
-            styleOverrides: {
-                body: {
-                    backgroundColor: "#ffffff",
+export function ThemeProvider({ children }: { children: ReactNode }) {
+    const [mode, setMode] = useState<Mode>(() => (localStorage.getItem("taskraum-mode") as Mode) || "light");
+    const toggleColorMode = () => setMode((m) => (m === "light" ? "dark" : "light"));
+
+    useEffect(() => {
+        localStorage.setItem("taskraum-mode", mode);
+        document.body.classList.toggle("taskraum-dark", mode === "dark");
+    }, [mode]);
+
+    const theme = useMemo(
+        () =>
+            createTheme({
+                palette: {
+                    mode,
+                    primary: { main: "#4f46e5" },
+                    background: {
+                        default: mode === "light" ? "#ffffff" : "#0b1020",
+                        paper: mode === "light" ? "#ffffff" : "#0f1426",
+                    },
+                    text: {
+                        primary: mode === "light" ? "#111827" : "#e5e7eb",
+                        secondary: mode === "light" ? "#6b7280" : "#a8b3cf",
+                    },
+                    divider: mode === "light" ? "rgba(17,24,39,0.12)" : "rgba(148,163,184,0.16)",
+                },
+                typography: {
+                    fontFamily:
+                        'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"',
                 },
-            },
-        },
-    },
-});
+                components: {
+                    MuiAppBar: {
+                        styleOverrides: {
+                            root: { backgroundImage: "none" },
+                        },
+                    },
+                    MuiPaper: {
+                        styleOverrides: {
+                            root: { backgroundImage: "none" },
+                        },
+                    },
+                    MuiCard: {
+                        styleOverrides: {
+                            root: { backgroundColor: mode === "light" ? "#ffffff" : "#121a2f" },
+                        },
+                    },
+                },
+            }),
+        [mode]
+    );
 
-export function ThemeProvider({ children }: { children: ReactNode }) {
     return (
-        <MuiThemeProvider theme={theme}>
-            <CssBaseline />
-            {children}
-        </MuiThemeProvider>
+        <ColorModeContext.Provider value={{ mode, toggleColorMode }}>
+            <MuiThemeProvider theme={theme}>
+                <CssBaseline />
+                {children}
+            </MuiThemeProvider>
+        </ColorModeContext.Provider>
     );
 }