feat: add customizable accent color

AGENTS.md

@@ -0,0 +1,27 @@
+# AGENTS.md
+
+Bun workspaces monorepo: `apps/backend` (Elysia API on port 3000) + `apps/frontend` (Solid.js/Vite/PWA app on port 5173). `packages/` is empty; the frontend is the primary app.
+
+## Commands
+
+- `bun install` (root) — install all workspaces
+- `bun run dev` — start backend + frontend together
+  - `bun --filter backend dev` / `bun --filter frontend dev` for one side
+- Typecheck/build frontend: `bun --filter frontend build` (`tsc -b && vite build`)
+- No test suite exists: backend `test` script is a stub that exits 1; frontend has no tests
+
+## Gotchas
+
+- Readme at repo root is stale `bun init` boilerplate (`bun run index.ts` does not exist); the real entrypoints are `apps/backend/src/index.ts` and `apps/frontend/src/index.tsx`
+- Frontend calls `/api/v1/...`; Vite dev proxy adds the strip of `/api` before forwarding to `localhost:3000`. Backend routes live under `/v1/...` with NO `/api` prefix. Don't add `/api` to backend routes or drop it from frontend fetches
+- Backend `apps/backend/src/index.ts:3` hardcodes `isDev = true`, which switches ID encoding between `utf8` and `base64url` for opaque `sportsmanager:<host>:<remoteId>` IDs — decode/encode must both use the same format; change it deliberately, not accidentally
+- Frontend is Solid.js (`jsxImportSource: solid-js`), not React — no hooks, no `useState`; use `createSignal` / `createStore` (see `src/stores/matchStore.ts`)
+- `matchStore.loadMatch` merges the stats payload into the same match record via `patchMatch`; the shape of `Match` is intentionally loose (`[key: string]: unknown`)
+- PWA (`@serwist/*`) is in `apps/frontend/package.json` but NOT wired into `vite.config.ts` — Serwist service worker is currently inactive
+- `apps/backend/package.json` has a stale `"module": "src/index.js"` field; the actual file is `src/index.ts`
+
+## Conventions
+
+- No lint/CI/prettier config is set up (prettier is only a root devDependency with no config file) — don't assume a formatter style
+- Backend data comes from external German table-tennis/sportsmanager APIs (domains listed at the bottom of `apps/backend/src/index.ts`); responses are in German and field names are the raw API's (e.g. `heim_punkte`, `gast_name`)
+- Team/match/event IDs are derived (encoded), not raw — compute IDs via the `Sportsmanager.id()` helper rather than hardcoding

apps/backend/src/index.ts

@@ -413,46 +413,52 @@ class Sportsmanager {
         home: home.form,
         away: away.form,
       },
-      standing: Number(match.veranstaltung.tabellenwertung)
-        ? {
-            home: {
-              pos: Number(match.heim_team.platz),
-              name: match.heim_team.teamname,
-              logo: match.heim_team.teambild,
-              games:
-                match.heim_team.siege +
-                match.heim_team.unentschieden +
-                match.heim_team.niederlagen,
-              points: match.heim_team.begegnungspunkte,
-              diff: `${match.heim_team.spielpunkte_differenz > 0 ? "+" : ""}${match.heim_team.spielpunkte_differenz}`,
-            },
-            away: {
-              pos: Number(match.gast_team.platz),
-              name: match.gast_team.teamname,
-              logo: match.gast_team.teambild,
-              games:
-                match.gast_team.siege +
-                match.gast_team.unentschieden +
-                match.gast_team.niederlagen,
-              points: match.gast_team.begegnungspunkte,
-              diff: `${match.gast_team.spielpunkte_differenz > 0 ? "+" : ""}${match.gast_team.spielpunkte_differenz}`,
-            },
-          }
-        : undefined,
-      firstLeg: match.hinspiel
-        ? {
-            homeTeam: {
-              ...teams[match.hinspiel.heim_team_id],
-              goals: Number(match.hinspiel.heim_punkte),
-              points: Number(match.hinspiel.heim_spielpunkte),
-            },
-            awayTeam: {
-              ...teams[match.hinspiel.gast_team_id],
-              goals: Number(match.hinspiel.gast_punkte),
-              points: Number(match.hinspiel.gast_spielpunkte),
-            },
-          }
-        : undefined,
+      standing:
+        Number(match.veranstaltung.tabellenwertung) > 0
+          ? {
+              home: {
+                pos: Number(match.heim_team.platz),
+                name: match.heim_team.teamname,
+                logo: match.heim_team.teambild,
+                games:
+                  match.heim_team.siege +
+                  match.heim_team.unentschieden +
+                  match.heim_team.niederlagen,
+                points: match.heim_team.begegnungspunkte,
+                diff: `${match.heim_team.spielpunkte_differenz > 0 ? "+" : ""}${match.heim_team.spielpunkte_differenz}`,
+              },
+              away: {
+                pos: Number(match.gast_team.platz),
+                name: match.gast_team.teamname,
+                logo: match.gast_team.teambild,
+                games:
+                  match.gast_team.siege +
+                  match.gast_team.unentschieden +
+                  match.gast_team.niederlagen,
+                points: match.gast_team.begegnungspunkte,
+                diff: `${match.gast_team.spielpunkte_differenz > 0 ? "+" : ""}${match.gast_team.spielpunkte_differenz}`,
+              },
+            }
+          : undefined,
+      firstLeg:
+        match.hinspiel &&
+        !(
+          Number(match.hinspiel.heim_punkte) === 0 &&
+          Number(match.hinspiel.gast_punkte) === 0
+        )
+          ? {
+              homeTeam: {
+                ...teams[match.hinspiel.heim_team_id],
+                goals: Number(match.hinspiel.heim_punkte),
+                points: Number(match.hinspiel.heim_spielpunkte),
+              },
+              awayTeam: {
+                ...teams[match.hinspiel.gast_team_id],
+                goals: Number(match.hinspiel.gast_punkte),
+                points: Number(match.hinspiel.gast_spielpunkte),
+              },
+            }
+          : undefined,
       // orig: { teams, home, away, match, homeTeam, awayTeam },
     };
   };

apps/frontend/index.html

@@ -1,11 +1,48 @@
 <!doctype html>
-<html lang="en" class="bg-gray-900">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#00ff00" />
-    <title>fontend</title>
+    <meta name="theme-color" content="#111827" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f1f5f9" />
+    <title>Kickern</title>
+    <script>
+      // Apply the saved theme (light/dark/auto) before first paint to avoid a flash
+      // of the wrong theme. Mirrors src/stores/themeStore.ts.
+      (function () {
+        try {
+          var stored = localStorage.getItem("theme");
+          var mode =
+            stored === "light" || stored === "dark" || stored === "auto"
+              ? stored
+              : "auto";
+          var dark =
+            mode === "dark" ||
+            (mode === "auto" &&
+              window.matchMedia("(prefers-color-scheme: dark)").matches);
+          var root = document.documentElement;
+          root.classList.toggle("dark", dark);
+          root.style.colorScheme = dark ? "dark" : "light";
+
+          var accent = localStorage.getItem("accent");
+          if (accent && /^#[0-9a-fA-F]{6}$/.test(accent)) {
+            var hex = accent.slice(1);
+            var r = parseInt(hex.slice(0, 2), 16) / 255;
+            var g = parseInt(hex.slice(2, 4), 16) / 255;
+            var b = parseInt(hex.slice(4, 6), 16) / 255;
+            var lin = function (c) {
+              return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+            };
+            var lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+            root.style.setProperty("--c-accent", accent);
+            root.style.setProperty("--c-accent-contrast", lum > 0.45 ? "#0b1220" : "#ffffff");
+          }
+        } catch (e) {
+          /* ignore */
+        }
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

apps/frontend/src/App.tsx

@@ -1,11 +1,12 @@
-import { Router, Route, useNavigate, useBeforeLeave } from "@solidjs/router";
 import { OverviewPage } from "./pages/Overview";
 import { MatchPage } from "./pages/MatchDetails";
-import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";
+import { SettingsPage } from "./pages/Settings";
+import { BottomNav } from "./components/BottomNav";
+import { type ParentProps, onMount, onCleanup, createSignal, Show } from "solid-js";
 
 function Layout(props: ParentProps) {
   return (
-    <div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
+    <div class="bg-app text-ink h-dvh flex flex-col font-sans overflow-hidden select-none">
       {props.children}
     </div>
   );
@@ -67,13 +68,19 @@ function App() {
   });
 
   return (
-    <div class="bg-gray-900 text-white h-dvh flex flex-col font-sans overflow-hidden select-none">
-      <Show when={path() === "/"}>
-        <OverviewPage />
-      </Show>
-      <Show when={path().startsWith("/match/")}>
-        <MatchPage />
-      </Show>
+    <div class="bg-app text-ink h-dvh flex flex-col font-sans overflow-hidden select-none">
+      <div class="flex-1 min-h-0 flex flex-col overflow-hidden">
+        <Show when={path() === "/"}>
+          <OverviewPage />
+        </Show>
+        <Show when={path() === "/einstellungen" || path() === "/settings"}>
+          <SettingsPage />
+        </Show>
+        <Show when={path().startsWith("/match/")}>
+          <MatchPage />
+        </Show>
+      </div>
+      <BottomNav currentPath={path} />
     </div>
   );
 }

apps/frontend/src/components/BottomNav.tsx

@@ -0,0 +1,76 @@
+interface BottomNavProps {
+  currentPath: () => string;
+}
+
+function HomeIcon() {
+  return (
+    <svg
+      class="h-6 w-6"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      viewBox="0 0 24 24"
+    >
+      <path d="M3 10.5 12 3l9 7.5" />
+      <path d="M5 9.5V21h5v-6h4v6h5V9.5" />
+    </svg>
+  );
+}
+
+function GearIcon() {
+  return (
+    <svg
+      class="h-6 w-6"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      viewBox="0 0 24 24"
+    >
+      <circle cx="12" cy="12" r="3" />
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
+      />
+    </svg>
+  );
+}
+
+export function BottomNav(props: BottomNavProps) {
+  const path = () => props.currentPath();
+
+  const isHome = () => path() === "/";
+  const isSettings = () =>
+    path().startsWith("/einstellungen") || path().startsWith("/settings");
+
+  return (
+    <nav
+      class="shrink-0 border-t border-line bg-surface/90 backdrop-blur-md flex"
+      style={{ paddingBlockEnd: "env(safe-area-inset-bottom)" }}
+    >
+      <a
+        href="/"
+        aria-label="Übersicht"
+        class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
+          isHome() ? "text-accent" : "text-ink-muted hover:text-ink"
+        }`}
+      >
+        <HomeIcon />
+        <span class="text-[10px] font-medium">Übersicht</span>
+      </a>
+
+      <a
+        href="/einstellungen"
+        aria-label="Einstellungen"
+        class={`flex-1 flex flex-col items-center gap-1 py-2.5 transition-colors ${
+          isSettings() ? "text-accent" : "text-ink-muted hover:text-ink"
+        }`}
+      >
+        <GearIcon />
+        <span class="text-[10px] font-medium">Einstellungen</span>
+      </a>
+    </nav>
+  );
+}

apps/frontend/src/components/Card.tsx

@@ -0,0 +1,42 @@
+import { splitProps, type ParentProps, type Flow } from "solid-js";
+
+interface CardProps extends ParentProps {
+  /** "default" = rounded-xl (overview tile), "section" = rounded-2xl panel (details) */
+  variant?: "default" | "section";
+  /** Subtle shadow, off by default */
+  shadowed?: boolean;
+  /** If set, render as an <a> link instead of a <div> */
+  href?: string;
+  [key: string]: any;
+}
+
+export function Card(props: CardProps) {
+  const [local, rest] = splitProps(props, [
+    "variant",
+    "shadowed",
+    "class",
+    "children",
+    "href",
+  ]);
+
+  const base = () =>
+    `border border-line ${
+      local.variant === "section" ? "bg-surface2 rounded-2xl" : "bg-surface rounded-xl"
+    } ${local.shadowed ? "shadow-md" : ""} ${local.class ?? ""}`;
+
+  const children = local.children as Flow;
+
+  if (local.href) {
+    return (
+      <a {...(rest as object)} href={local.href} class={base()}>
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <div {...(rest as object)} class={base()}>
+      {children}
+    </div>
+  );
+}

apps/frontend/src/components/DayTab.tsx

@@ -22,10 +22,10 @@ export const DayTab = (props: {
       onClick={local.onClick}
       class={`flex flex-col items-center justify-center min-w-13.75 p-2 rounded-xl transition-all duration-200 ${
         local.isActive
-          ? "bg-emerald-500 text-gray-900 font-bold scale-105 shadow-lg shadow-emerald-500/20"
+          ? "bg-accent text-accent-contrast font-bold scale-105 shadow-lg shadow-accent/20"
           : local.day.isToday
-            ? "bg-gray-700 text-emerald-400 border border-emerald-500/30"
-            : "bg-gray-800 text-gray-400"
+            ? "bg-chip text-accent border border-accent/30"
+            : "bg-surface text-ink-muted"
       }`}
     >
       <span class="text-xs uppercase tracking-wider">{local.day.weekday}</span>

apps/frontend/src/components/EmptyDay.tsx

@@ -2,7 +2,7 @@ export const EmptyDay = (props: {
   day: { dayNum: number; weekday: string };
 }) => {
   return (
-    <div class="text-center py-12 text-gray-500 bg-gray-800/30 rounded-2xl border border-dashed border-gray-700">
+    <div class="text-center py-12 text-ink-muted bg-surface/30 rounded-2xl border border-dashed border-line">
       <p class="text-lg font-medium">Spielfrei!</p>
       <p class="text-sm mt-1">
         Keine Matches am {props.day.dayNum}. {props.day.weekday}

apps/frontend/src/components/Header.tsx

@@ -7,13 +7,13 @@ type HeaderProps = ParentProps<{
 }>;
 export const Header = (props: HeaderProps) => (
   <header
-    class={`p-4 bg-gray-800 border-b border-gray-700 items-center sticky top-0 z-20 flex`}
+    class={`p-4 bg-surface border-b border-line items-center sticky top-0 z-20 flex`}
   >
     <div class="flex items-center w-8 h-5">
       <Show when={props.showBackButton}>
         <button
           onClick={() => window.history.back()}
-          class="flex items-center gap-1 text-sm text-emerald-400 hover:text-emerald-300 py-1 pr-3 z-1"
+          class="flex items-center gap-1 text-sm text-accent hover:text-accent py-1 pr-3 z-1"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -35,7 +35,7 @@ export const Header = (props: HeaderProps) => (
     </div>
 
     <h1
-      class="absolute inset-x-0 text-base font-boldtracking-wide text-center text-emerald-400 truncate"
+      class="absolute inset-x-0 text-base font-boldtracking-wide text-center text-accent truncate"
       onClick={props.onClickTitle}
     >
       {props.title}

apps/frontend/src/components/ListSkeleton.tsx

@@ -6,30 +6,30 @@ export function ListSkeleton() {
     <div class=" space-y-3 animate-pulse">
       <div
         style={{ "--delay": "0ms" }}
-        class="h-3 bg-gray-800 rounded w-1/3 mb-4 animate-skeleton-loop"
+        class="h-3 bg-surface rounded w-1/3 mb-4 animate-skeleton-loop"
       ></div>
       {/* Wir rendern 4 gefälschte Spiele-Karten */}
       <For each={[1, 2, 3, 4]}>
         {(_, i) => (
           <div
-            class="bg-gray-800/60 p-4 rounded-xl border border-gray-700/40 shadow-md flex items-center justify-between h-[58px] animate-skeleton-loop"
+            class="bg-surface/60 p-4 rounded-xl border border-line/40 shadow-md flex items-center justify-between h-[58px] animate-skeleton-loop"
             style={{ "--delay": `${i() * 150}ms` }}
           >
             {/* Team A (Rechtsbündig simuliert) */}
             <div class="w-full flex justify-end pr-2 items-center gap-2">
-              <div class="h-4 bg-gray-700 rounded w-20"></div>
-              <div class="size-8 bg-gray-700 rounded-full" />
+              <div class="h-4 bg-chip rounded w-20"></div>
+              <div class="size-8 bg-chip rounded-full" />
             </div>
 
             {/* Mittlerer Zeit-/Ergebnisblock */}
             <div class="flex justify-center">
-              <div class="w-16 h-7 bg-gray-950/60 rounded-lg border border-gray-700/50"></div>
+              <div class="w-16 h-7 bg-elevated/60 rounded-lg border border-line/50"></div>
             </div>
 
             {/* Team B (Linksbündig simuliert) */}
             <div class="w-full flex justify-start pl-2 gap-2 items-center">
-              <div class="size-8 bg-gray-700 rounded-full" />
-              <div class="h-4 bg-gray-700 rounded w-20"></div>
+              <div class="size-8 bg-chip rounded-full" />
+              <div class="h-4 bg-chip rounded w-20"></div>
             </div>
           </div>
         )}

apps/frontend/src/components/LogoFallback.tsx

@@ -1,6 +1,6 @@
 export const LogoFallback = () => (
   <div
-    class={`size-8 flex-shrink-0 rounded-full flex items-center justify-center border transition-colors duration-200 ${"bg-gray-800 border-gray-700 text-gray-400"}`}
+    class={`size-8 flex-shrink-0 rounded-full flex items-center justify-center border transition-colors duration-200 ${"bg-surface border-line text-ink-muted"}`}
   >
     {/* Ein sauberes, sportliches Trikot-SVG */}
     <svg

apps/frontend/src/components/MatchDetailsFutureSkeleton.tsx

@@ -0,0 +1,83 @@
+import { For } from "solid-js";
+import { Card } from "./Card";
+
+export function MatchDetailsFutureSkeleton() {
+  return (
+    <div class="animate-pulse">
+      <div class="bg-gradient-to-b from-surface to-surface2 p-6 border-b border-line text-center">
+        <div class="h-2.5 bg-chip rounded w-24 mx-auto mb-4 animate-skeleton-loop" />
+
+        <div class="flex items-center justify-between gap-4 my-2">
+          <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
+            <div
+              class="size-14 bg-chip rounded-full animate-skeleton-loop"
+              style={{ "--delay": "0ms" }}
+            />
+            <div class="h-3 bg-chip rounded w-20" />
+          </div>
+
+          <div class="flex flex-col items-center justify-center px-4 py-2 bg-elevated/50 rounded-2xl border border-line min-w-[100px] gap-1.5">
+            <div class="h-2.5 bg-chip rounded w-14" />
+            <div class="h-5 bg-chip rounded w-12" />
+            <div class="h-2 bg-chip rounded w-6" />
+          </div>
+
+          <div class="flex-1 flex flex-col items-center gap-2 min-w-0">
+            <div
+              class="size-14 bg-chip rounded-full animate-skeleton-loop"
+              style={{ "--delay": "80ms" }}
+            />
+            <div class="h-3 bg-chip rounded w-20" />
+          </div>
+        </div>
+
+        <div class="h-2.5 bg-chip rounded w-32 mx-auto mt-4" />
+      </div>
+
+      <div class="p-4 space-y-6">
+        <Card variant="section" class="p-4 animate-skeleton-loop">
+          <div class="h-2.5 bg-chip rounded w-40 mx-auto mb-3" />
+          <div class="h-3.5 w-full rounded-full bg-app border border-line" />
+          <div class="flex justify-between items-center mt-2.5">
+            <div class="h-2.5 bg-chip rounded w-14" />
+            <div class="h-2.5 bg-chip rounded w-14" />
+            <div class="h-2.5 bg-chip rounded w-14" />
+          </div>
+        </Card>
+
+        <Card
+          variant="section"
+          class="p-4 h-32 animate-skeleton-loop"
+          style={{ "--delay": "120ms" }}
+        />
+
+        <Card
+          variant="section"
+          class="p-4 space-y-4 animate-skeleton-loop"
+          style={{ "--delay": "240ms" }}
+        >
+          <div class="h-2.5 bg-chip rounded w-32 mx-auto" />
+          <div class="flex items-center justify-between gap-2 px-2">
+            <div class="flex gap-1">
+              <For each={[0, 1, 2, 3, 4]}>
+                {() => <div class="size-6 bg-chip rounded-full" />}
+              </For>
+            </div>
+            <div class="h-2.5 bg-chip rounded w-8" />
+            <div class="flex gap-1">
+              <For each={[0, 1, 2, 3, 4]}>
+                {() => <div class="size-6 bg-chip rounded-full" />}
+              </For>
+            </div>
+          </div>
+        </Card>
+
+        <Card
+          variant="section"
+          class="p-4 h-40 animate-skeleton-loop"
+          style={{ "--delay": "360ms" }}
+        />
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/MatchDetailsGenericSkeleton.tsx

@@ -0,0 +1,35 @@
+import { For } from "solid-js";
+import { Card } from "./Card";
+
+export function MatchDetailsGenericSkeleton() {
+  return (
+    <div class="animate-pulse">
+      <div class="bg-gradient-to-b from-surface to-surface2 p-6 border-b border-line flex items-center justify-center gap-4">
+        <div
+          class="size-10 bg-chip rounded-full animate-skeleton-loop"
+          style={{ "--delay": "0ms" }}
+        />
+        <div
+          class="w-14 h-7 bg-elevated/60 rounded-lg border border-line/50 animate-skeleton-loop"
+          style={{ "--delay": "100ms" }}
+        />
+        <div
+          class="size-10 bg-chip rounded-full animate-skeleton-loop"
+          style={{ "--delay": "50ms" }}
+        />
+      </div>
+
+      <div class="p-4 space-y-3">
+        <For each={[0, 1, 2]}>
+          {(i) => (
+            <Card
+              variant="section"
+              class="h-16 animate-skeleton-loop"
+              style={{ "--delay": `${i * 150}ms` }}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/MatchDetailsSkeleton.tsx

@@ -0,0 +1,68 @@
+import { For } from "solid-js";
+import { Card } from "./Card";
+
+export function MatchDetailsSkeleton() {
+  return (
+    <div class="animate-pulse">
+      <div class="bg-gradient-to-b from-surface to-surface2 w-full py-5.5 px-10 border-b border-line">
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex-1 flex items-center gap-2 justify-end">
+            <div
+              class="h-3 bg-chip rounded w-16 animate-skeleton-loop"
+              style={{ "--delay": "0ms" }}
+            />
+            <div
+              class="size-8 bg-chip rounded-full animate-skeleton-loop"
+              style={{ "--delay": "50ms" }}
+            />
+          </div>
+          <div
+            class="w-16 min-w-16 h-7 bg-elevated/60 rounded-lg border border-line/50 animate-skeleton-loop"
+            style={{ "--delay": "100ms" }}
+          />
+          <div class="flex-1 flex items-center gap-2 justify-start">
+            <div
+              class="size-8 bg-chip rounded-full animate-skeleton-loop"
+              style={{ "--delay": "50ms" }}
+            />
+            <div
+              class="h-3 bg-chip rounded w-16 animate-skeleton-loop"
+              style={{ "--delay": "0ms" }}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div class="p-4 space-y-3">
+        <For each={[0, 1, 2, 3]}>
+          {(i) => (
+            <Card
+              variant="section"
+              class="p-3 animate-skeleton-loop"
+              style={{ "--delay": `${i * 120}ms` }}
+            >
+              <div class="flex justify-center mb-2">
+                <div class="h-2.5 bg-chip rounded w-14" />
+              </div>
+              <div class="flex items-center gap-2">
+                <div class="flex-1 flex flex-col gap-2">
+                  <div class="flex items-center gap-2 justify-end">
+                    <div class="h-3 bg-chip rounded w-16" />
+                    <div class="size-8 bg-chip rounded-full" />
+                  </div>
+                </div>
+                <div class="w-8 h-6 bg-elevated/60 rounded border border-line/50 flex-shrink-0" />
+                <div class="flex-1 flex flex-col gap-2">
+                  <div class="flex items-center gap-2 justify-start">
+                    <div class="size-8 bg-chip rounded-full" />
+                    <div class="h-3 bg-chip rounded w-16" />
+                  </div>
+                </div>
+              </div>
+            </Card>
+          )}
+        </For>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/MatchInsights.tsx

@@ -1,5 +1,6 @@
 import { Show } from "solid-js";
 import { MatchItem } from "./MatchItem";
+import { Card } from "./Card";
 interface FirstLeg {
   homeScore: number;
   awayScore: number;
@@ -15,13 +16,13 @@ export function MatchInsights(props: {
   awayAvgGoals?: number; // z.B. 4.8
 }) {
   return (
-    <div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4">
-      <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
-        Hinspiel
-      </h3>
-      <Show when={props.firstLeg}>
+    <Show when={props.firstLeg}>
+      <Card variant="section" class="p-4 space-y-4">
+        <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
+          Hinspiel
+        </h3>
         <MatchItem game={props.firstLeg} />
-      </Show>
-    </div>
+      </Card>
+    </Show>
   );
 }

apps/frontend/src/components/ResultTile.tsx

@@ -1,15 +1,15 @@
 export const ResultTile = (props: { home?: number; away?: number }) => {
   return (
-    <div class="flex flex-col items-center justify-center bg-gray-900/60 p-2 rounded-lg border border-gray-700">
+    <div class="flex flex-col items-center justify-center bg-app/60 p-2 rounded-lg border border-line">
       <div class="flex items-center gap-1 font-mono text-xs font-bold">
         <span
-          class={props.home > props.away ? "text-emerald-400" : "text-gray-300"}
+          class={props.home > props.away ? "text-accent" : "text-ink"}
         >
           {props.home ?? "-"}
         </span>
-        <span class="text-gray-600">:</span>
+        <span class="text-ink-faint">:</span>
         <span
-          class={props.away > props.home ? "text-emerald-400" : "text-gray-300"}
+          class={props.away > props.home ? "text-accent" : "text-ink"}
         >
           {props.away ?? "-"}
         </span>

apps/frontend/src/components/SquadComparison.tsx

@@ -1,17 +1,20 @@
+import { For } from "solid-js";
+import { Card } from "./Card";
+
 export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
   const homeMembers = () => props.homeRosters || [];
   const awayMembers = () => props.awayRosters || [];
 
   return (
-    <div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4 overflow-hidden">
-      <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
+    <Card variant="section" class="p-4 space-y-4 overflow-hidden">
+      <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
         Kaderübersicht
       </h3>
 
       <div class="space-y-4">
         {/* HEIM TEAM ROW */}
         <div class="space-y-2">
-          <div class="text-[10px] uppercase font-bold text-emerald-400 px-1">
+          <div class="text-[10px] uppercase font-bold text-accent px-1">
             {props.homeTeam.name}
           </div>
           {/* Horizontale Scrollbar */}
@@ -19,14 +22,14 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
             <For each={homeMembers()}>
               {(player) => (
                 <div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
-                  <div class="size-10 rounded-full border border-emerald-500/20 p-0.5 bg-gray-900 mb-1">
+                  <div class="size-10 rounded-full border border-accent/20 p-0.5 bg-app mb-1">
                     <img
                       src={player.imageUrl || "/fallback-avatar.svg"}
                       class="size-full rounded-full object-cover"
                       alt=""
                     />
                   </div>
-                  <span class="text-[10px] text-gray-300 font-medium truncate w-full">
+                  <span class="text-[10px] text-ink font-medium truncate w-full">
                     {player.name}
                     {/* Nur Nachname spart Platz */}
                   </span>
@@ -38,21 +41,21 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
 
         {/* AUSWÄRTS TEAM ROW */}
         <div class="space-y-2">
-          <div class="text-[10px] uppercase font-bold text-gray-400 px-1">
+          <div class="text-[10px] uppercase font-bold text-ink-muted px-1">
             {props.awayTeam.name}
           </div>
           <div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none snap-x">
             <For each={awayMembers()}>
               {(player) => (
                 <div class="flex flex-col items-center justify-center text-center w-14 flex-shrink-0 snap-start">
-                  <div class="size-10 rounded-full border border-gray-700 p-0.5 bg-gray-900 mb-1">
+                  <div class="size-10 rounded-full border border-line p-0.5 bg-app mb-1">
                     <img
                       src={player.imageUrl || "/fallback-avatar.svg"}
                       class="size-full rounded-full object-cover"
                       alt=""
                     />
                   </div>
-                  <span class="text-[10px] text-gray-300 font-medium truncate w-full">
+                  <span class="text-[10px] text-ink font-medium truncate w-full">
                     {player.name.split(" ")[1] || player.name}
                   </span>
                 </div>
@@ -61,6 +64,6 @@ export function SquadComparison(props: { homeTeam: any; awayTeam: any }) {
           </div>
         </div>
       </div>
-    </div>
+    </Card>
   );
 }

apps/frontend/src/components/TableComparison.tsx

@@ -1,3 +1,5 @@
+import { Card } from "./Card";
+
 export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
   // Beispielhafte Mock-Daten – hier kommen später die echten Tabellenplatz-Daten rein
   const homeStats = props.homeTeam;
@@ -24,14 +26,14 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
   const diffInPlaces = () => Math.abs(homeStats.pos - awayStats.pos) - 1;
 
   return (
-    <div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-3">
-      <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
+    <Card variant="section" class="p-4 space-y-3">
+      <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
         Tabellen-Ausschnitt
       </h3>
 
       <div class="w-full space-y-1">
         {/* Header-Zeile */}
-        <div class="flex text-[10px] uppercase font-bold text-gray-500 px-2 pb-1 border-b border-gray-800">
+        <div class="flex text-[10px] uppercase font-bold text-ink-muted px-2 pb-1 border-b border-line">
           <span class="w-8">Pl.</span>
           <span class="flex-1">Verein</span>
           <span class="w-8 text-center">Sp.</span>
@@ -43,11 +45,11 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
         <div
           class={`flex items-center text-xs p-2 rounded-xl border ${
             sortedTeams()[0].name === props.homeTeam.name
-              ? "bg-emerald-950/20 border-emerald-500/20"
-              : "bg-gray-900/40 border-transparent"
+              ? "bg-accent/20 border-accent/20"
+              : "bg-app/40 border-transparent"
           }`}
         >
-          <span class="w-8 font-mono font-bold text-gray-400">
+          <span class="w-8 font-mono font-bold text-ink-muted">
             #{sortedTeams()[0].pos}
           </span>
           <span class="flex-1 font-medium truncate flex items-center gap-2">
@@ -58,21 +60,21 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
             />
             {sortedTeams()[0].name}
           </span>
-          <span class="w-8 text-center text-gray-400 font-mono">
+          <span class="w-8 text-center text-ink-muted font-mono">
             {sortedTeams()[0].games}
           </span>
-          <span class="w-10 text-center text-gray-400 font-mono">
+          <span class="w-10 text-center text-ink-muted font-mono">
             {sortedTeams()[0].diff}
           </span>
-          <span class="w-10 text-right font-bold text-emerald-400 font-mono">
+          <span class="w-10 text-right font-bold text-accent font-mono">
             {sortedTeams()[0].points}
           </span>
         </div>
 
         {/* Platzhalter-Trenner, wenn Teams weiter auseinanderliegen */}
         <Show when={diffInPlaces() > 0}>
-          <div class="flex items-center px-4 py-1 text-[10px] text-gray-600 font-medium">
-            <div class="w-1 h-3 border-l border-dashed border-gray-700 mr-3"></div>
+          <div class="flex items-center px-4 py-1 text-[10px] text-ink-faint font-medium">
+            <div class="w-1 h-3 border-l border-dashed border-line mr-3"></div>
             <span>
               ... {diffInPlaces()} {diffInPlaces() === 1 ? "Platz" : "Plätze"}{" "}
               dazwischen ...
@@ -84,11 +86,11 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
         <div
           class={`flex items-center text-xs p-2 rounded-xl border ${
             sortedTeams()[1].name === props.homeTeam.name
-              ? "bg-emerald-950/20 border-emerald-500/20"
-              : "bg-gray-900/40 border-transparent"
+              ? "bg-accent/20 border-accent/20"
+              : "bg-app/40 border-transparent"
           }`}
         >
-          <span class="w-8 font-mono font-bold text-gray-400">
+          <span class="w-8 font-mono font-bold text-ink-muted">
             #{sortedTeams()[1].pos}
           </span>
           <span class="flex-1 font-medium truncate flex items-center gap-2">
@@ -99,17 +101,17 @@ export function TableComparison(props: { homeTeam: any; awayTeam: any }) {
             />
             {sortedTeams()[1].name}
           </span>
-          <span class="w-8 text-center text-gray-400 font-mono">
+          <span class="w-8 text-center text-ink-muted font-mono">
             {sortedTeams()[1].games}
           </span>
-          <span class="w-10 text-center text-gray-400 font-mono">
+          <span class="w-10 text-center text-ink-muted font-mono">
             {sortedTeams()[1].diff}
           </span>
-          <span class="w-10 text-right font-bold text-emerald-400 font-mono">
+          <span class="w-10 text-right font-bold text-accent font-mono">
             {sortedTeams()[1].points}
           </span>
         </div>
       </div>
-    </div>
+    </Card>
   );
 }

apps/frontend/src/index.css

@@ -1,5 +1,72 @@
 @import "tailwindcss";
 
+/* Dark mode toggled via a class on <html> (see stores/themeStore.ts),
+   so the `dark:` variant and CSS tokens follow the user's Light/Dark/Auto choice. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  color-scheme: light;
+  --c-app: #f1f5f9;
+  --c-surface: #ffffff;
+  --c-surface2: #f8fafc;
+  --c-elevated: #e2e8f0;
+  --c-line: #e2e8f0;
+  --c-line-soft: #e8edf4;
+  --c-ink: #0f172a;
+  --c-ink-muted: #475569;
+  --c-ink-faint: #94a3b8;
+  --c-chip: #cbd5e1;
+  --c-accent: #047857;
+  --c-accent2: #2563eb;
+  --c-accent3: #e11d48;
+  --c-accent4: #d97706;
+  --c-accent5: #0284c7;
+  --c-accent-contrast: #ffffff;
+}
+
+.dark {
+  color-scheme: dark;
+  --c-app: #111827;
+  --c-surface: #1f2937;
+  --c-surface2: #182337;
+  --c-elevated: #0b1120;
+  --c-line: #374151;
+  --c-line-soft: #263248;
+  --c-ink: #f8fafc;
+  --c-ink-muted: #9ca3af;
+  --c-ink-faint: #6b7280;
+  --c-chip: #334155;
+  --c-accent: #34d399;
+  --c-accent2: #60a5fa;
+  --c-accent3: #fb7185;
+  --c-accent4: #fbbf24;
+  --c-accent5: #38bdf8;
+  --c-accent-contrast: #052e1a;
+}
+
+@theme inline {
+  --color-app: var(--c-app);
+  --color-surface: var(--c-surface);
+  --color-surface2: var(--c-surface2);
+  --color-elevated: var(--c-elevated);
+  --color-line: var(--c-line);
+  --color-line-soft: var(--c-line-soft);
+  --color-ink: var(--c-ink);
+  --color-ink-muted: var(--c-ink-muted);
+  --color-ink-faint: var(--c-ink-faint);
+  --color-chip: var(--c-chip);
+  --color-accent: var(--c-accent);
+  --color-accent2: var(--c-accent2);
+  --color-accent3: var(--c-accent3);
+  --color-accent4: var(--c-accent4);
+  --color-accent5: var(--c-accent5);
+  --color-accent-contrast: var(--c-accent-contrast);
+}
+
+html,
+body {
+  background-color: var(--c-app);
+}
 
 @keyframes move-stripes {
   0% { background-position: 0 0; }

apps/frontend/src/pages/MatchDetails.tsx

@@ -1,22 +1,27 @@
-import { onMount } from "solid-js";
+import { createSignal, onMount } from "solid-js";
 import { Header } from "../components/Header";
 import { useParams } from "@solidjs/router";
 import { matchStore, loadMatch } from "../stores/matchStore";
 import { MatchItem } from "../components/MatchItem";
 import { MatchInsights } from "../components/MatchInsights";
 import { ResultTile } from "../components/ResultTile";
+import { MatchDetailsSkeleton } from "../components/MatchDetailsSkeleton";
+import { MatchDetailsFutureSkeleton } from "../components/MatchDetailsFutureSkeleton";
+import { MatchDetailsGenericSkeleton } from "../components/MatchDetailsGenericSkeleton";
 export function MatchPage() {
   // const { id } = useParams();
   const id = window.location.pathname.split("/").pop();
   const match = () => matchStore.matches.find((m) => m.id === id);
+  const [isLoading, setIsLoading] = createSignal(true);
 
-  onMount(() => {
-    loadMatch(id);
+  onMount(async () => {
+    await loadMatch(id);
+    setIsLoading(false);
   });
 
   return (
     <>
-      <div class="w-full h-full overflow-y-auto bg-gray-800">
+      <div class="w-full h-full overflow-y-auto bg-surface">
         <button
           class="sticky top-5 left-2 z-22 p-2 cursor-pointer"
           onClick={() => {
@@ -39,57 +44,204 @@ export function MatchPage() {
           </svg>
           <span class="sr-only">Back</span>
         </button>
-        <div class="bg-gray-900">
-          {/* <Header title={""} showBackButton /> */}
-          {match() && match().status !== "SCHEDULED" && (
-            <MatchDetails match={match()} />
-          )}
-          {match() && match().status === "SCHEDULED" && (
-            <MatchDetailsFuture match={match()} />
-          )}
+        <div class="bg-surface">
+          {/* <Header title="" showBackButton /> */}
+          <Show when={match()} fallback={<MatchDetailsGenericSkeleton />}>
+            <Show when={match().status !== "SCHEDULED"}>
+              <Show
+                when={!isLoading()}
+                fallback={<MatchDetailsSkeleton />}
+              >
+                <MatchDetails match={match()} />
+              </Show>
+            </Show>
+            <Show when={match().status === "SCHEDULED"}>
+              <Show
+                when={!isLoading()}
+                fallback={<MatchDetailsFutureSkeleton />}
+              >
+                <MatchDetailsFuture match={match()} />
+              </Show>
+            </Show>
+          </Show>
         </div>
       </div>
     </>
   );
 }
 
+const SLOT_LABEL: Record<string, string> = {
+  SINGLE: "Einzel",
+  DOUBLE: "Doppel",
+  SHOOT_OUT: "Shootout",
+};
+
+const SLOT_TEXT: Record<string, string> = {
+  SINGLE: "text-accent/80",
+  DOUBLE: "text-accent5/80",
+  SHOOT_OUT: "text-accent4/80",
+};
+
+function sidePlayers(side: any) {
+  return Array.isArray(side?.players)
+    ? side.players.filter((p: any) => p !== null && p !== undefined)
+    : [];
+}
+
+function PlayerChip(props: {
+  player: any;
+  side: "home" | "away";
+  winning?: boolean;
+}) {
+  const p = () => props.player;
+  const name = () => (p() ? `${p().firstName} ${p().lastName}`.trim() : "Unbesetzt");
+  const avatar = (
+    <div
+      class={`size-8 rounded-full border p-0.5 bg-app flex-shrink-0 ${
+        props.winning ? "border-accent/40" : "border-line"
+      }`}
+    >
+      <Show
+        when={p()?.imageUrl}
+        fallback={
+          <span class="size-full flex items-center justify-center text-[10px] font-bold text-ink-faint">
+            {p()?.firstName?.[0]?.toUpperCase() || "?"}
+          </span>
+        }
+      >
+        <img
+          src={p()!.imageUrl}
+          class="size-full rounded-full object-cover"
+          alt=""
+        />
+      </Show>
+    </div>
+  );
+  const label = (
+    <span
+      class={`min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium ${
+        props.side === "home" ? "text-left" : "text-right"
+      } ${props.winning ? "text-accent" : "text-ink"}`}
+    >
+      {name()}
+    </span>
+  );
+  return (
+    <div
+      class={`grid items-center gap-2 w-full min-w-0 ${
+        props.side === "home" ? "grid-cols-[auto_1fr]" : "grid-cols-[1fr_auto]"
+      }`}
+    >
+      {props.side === "home" ? (
+        <>
+          {avatar}
+          {label}
+        </>
+      ) : (
+        <>
+          {label}
+          {avatar}
+        </>
+      )}
+    </div>
+  );
+}
+
+function PlayerSide(props: {
+  side: any;
+  align: "home" | "away";
+  winning?: boolean;
+}) {
+  const players = () => sidePlayers(props.side);
+  return (
+    <div class="flex-1 min-w-0 flex flex-col justify-center gap-2">
+      <Show
+        when={players().length > 0}
+        fallback={
+          <span
+            class={`text-xs font-semibold text-ink-faint py-2.5 ${
+              props.align === "home" ? "text-left" : "text-right"
+            }`}
+          >
+            —
+          </span>
+        }
+      >
+        {players().map((player: any) => (
+          <PlayerChip player={player} side={props.align} winning={props.winning} />
+        ))}
+      </Show>
+    </div>
+  );
+}
+
+function SlotCard(props: { slot: any }) {
+  const slot = () => props.slot;
+  const sets = () => (slot().sets ?? []).filter((s: any) => s !== null);
+  const homeTotal = () =>
+    sets().reduce((n: number, s: any) => n + (Number(s.homeGoals) || 0), 0);
+  const awayTotal = () =>
+    sets().reduce((n: number, s: any) => n + (Number(s.awayGoals) || 0), 0);
+  const homeWins = () => homeTotal() > awayTotal();
+  const awayWins = () => awayTotal() > homeTotal();
+
+  return (
+    <Card variant="section" class="p-3">
+      <div class="flex justify-center mb-2">
+        <span
+          class={`text-[9px] font-semibold uppercase tracking-wider whitespace-nowrap ${
+            SLOT_TEXT[slot().type] || SLOT_TEXT.SINGLE
+          }`}
+        >
+          {SLOT_LABEL[slot().type] || slot().type}
+        </span>
+      </div>
+      <div class="flex items-center gap-2">
+        <PlayerSide side={slot().home} align="home" winning={homeWins()} />
+
+        <div class="flex flex-col items-center gap-1 flex-shrink-0">
+          <Show
+            when={sets().length > 0}
+            fallback={<span class="text-xs font-bold text-ink-faint">—</span>}
+          >
+            {sets().map((s: any) => (
+              <ResultTile home={s.homeGoals} away={s.awayGoals} />
+            ))}
+          </Show>
+        </div>
+
+        <PlayerSide side={slot().away} align="away" winning={awayWins()} />
+      </div>
+    </Card>
+  );
+}
+
 function MatchDetails(props: { match: any }) {
   return (
     <>
-      <div class="bg-gradient-to-b from-gray-800 to-gray-850 w-full py-5.5 px-10 border-b border-gray-800 text-center sticky top-0 backdrop-blur-md z-21">
+      <div class="bg-gradient-to-b from-surface/90 to-surface/80 w-full py-5.5 px-10 border-b border-line text-center sticky top-0 backdrop-blur-md z-21">
         <MatchItem game={props.match} />
       </div>
-      <div>
-        {props.match.slots?.map((s) => {
-          return (
-            <div>
-              {s.type}
-              <div class="flex flex-row">
-                <div class="flex-1">
-                  {s.home.players.map((p) => (
-                    <div>{p ? `${p.firstName} ${p.lastName}` : "-"}</div>
-                  ))}
-                </div>
-                <div>
-                  {s.sets.map((s) => (
-                    <ResultTile home={s?.homeGoals} away={s?.awayGoals} />
-                  ))}
-                </div>
-                <div class="flex-1">
-                  {s.away.players.map((p) => (
-                    <div>{p ? `${p.firstName} ${p.lastName}` : "-"}</div>
-                  ))}
-                </div>
-              </div>
+      <div class="p-4 space-y-3">
+        <Show
+          when={props.match.slots?.length}
+          fallback={
+            <div class="text-center text-sm text-ink-muted py-6">
+              Noch keine Ergebnisse
             </div>
-          );
-        })}
+          }
+        >
+          {props.match.slots.map((s: any) => (
+            <SlotCard slot={s} />
+          ))}
+        </Show>
       </div>
     </>
   );
 }
 
 import { For, Show } from "solid-js";
+import { Card } from "../components/Card.tsx";
 import { LogoFallback as JerseyFallback } from "../components/LogoFallback.tsx";
 import { TableComparison } from "../components/TableComparison.tsx";
 import { SquadComparison } from "../components/SquadComparison.tsx";
@@ -101,8 +253,8 @@ export default function MatchDetailsFuture(props: { match: any }) {
   return (
     <div>
       {/* 1. DER SHOWDOWN HEADER */}
-      <div class="bg-gradient-to-b from-gray-800 to-gray-850 p-6 border-b border-gray-800 text-center relative sticky top-0 backdrop-blur-md z-21">
-        <span class="text-xs font-bold uppercase tracking-widest text-emerald-400 block mb-4">
+      <div class="bg-gradient-to-b from-surface/90 to-surface/80 p-6 border-b border-line text-center relative sticky top-0 backdrop-blur-md z-21">
+        <span class="text-xs font-bold uppercase tracking-widest text-accent block mb-4">
           {props.match.event.name}
         </span>
 
@@ -119,27 +271,27 @@ export default function MatchDetailsFuture(props: { match: any }) {
                 alt=""
               />
             </Show>
-            <span class="text-sm font-semibold text-gray-200 text-center line-clamp-2 leading-tight">
+            <span class="text-sm font-semibold text-ink text-center line-clamp-2 leading-tight">
               {props.match.homeTeam.name}
             </span>
           </div>
 
           {/* Mittlerer Zeitblock */}
-          <div class="flex flex-col items-center justify-center px-4 py-2 bg-gray-950/50 rounded-2xl border border-gray-800 min-w-[100px]">
-            <span class="text-xs font-semibold text-emerald-400 tracking-wider">
+          <div class="flex flex-col items-center justify-center px-4 py-2 bg-elevated/50 rounded-2xl border border-line min-w-[100px]">
+            <span class="text-xs font-semibold text-accent tracking-wider">
               {new Date(props.match.scheduledAt).toLocaleDateString("de-DE", {
                 weekday: "short",
                 day: "2-digit",
                 month: "2-digit",
               })}
             </span>
-            <span class="text-xl font-mono font-bold text-white mt-0.5">
+            <span class="text-xl font-mono font-bold text-ink mt-0.5">
               {new Date(props.match.scheduledAt).toLocaleTimeString([], {
                 hour: "2-digit",
                 minute: "2-digit",
               })}
             </span>
-            <span class="text-[10px] text-gray-500 uppercase tracking-widest font-bold mt-1">
+            <span class="text-[10px] text-ink-muted uppercase tracking-widest font-bold mt-1">
               VS
             </span>
           </div>
@@ -156,14 +308,14 @@ export default function MatchDetailsFuture(props: { match: any }) {
                 alt=""
               />
             </Show>
-            <span class="text-sm font-semibold text-gray-200 text-center line-clamp-2 leading-tight">
+            <span class="text-sm font-semibold text-ink text-center line-clamp-2 leading-tight">
               {props.match.awayTeam.name}
             </span>
           </div>
         </div>
 
         {/* Location Info */}
-        <p class="text-xs text-gray-500 mt-4 flex items-center justify-center gap-1">
+        <p class="text-xs text-ink-muted mt-4 flex items-center justify-center gap-1">
           <svg
             class="size-3.5"
             fill="none"
@@ -189,24 +341,24 @@ export default function MatchDetailsFuture(props: { match: any }) {
       {/* INHALT / ANALYSE SEKTIONEN */}
       <div class="p-4 space-y-6">
         {/* 2. PROGNOSE / VOTING BAR */}
-        <div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800">
-          <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3 text-center">
+        <Card variant="section" class="p-4">
+          <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted mb-3 text-center">
             Wer gewinnt das Match?
           </h3>
           {/* Der 3-geteilte Balken */}
-          <div class="h-3.5 w-full rounded-full overflow-hidden flex bg-gray-900 border border-gray-750">
+          <div class="h-3.5 w-full rounded-full overflow-hidden flex bg-app border border-line">
             <div
-              class="bg-emerald-500 h-full transition-all duration-500"
+              class="bg-accent h-full transition-all duration-500"
               style={{
                 width: `${props.match.prediction?.homeWinChance ?? 0}%`,
               }}
             ></div>
             <div
-              class="bg-gray-700 h-full transition-all duration-500"
+              class="bg-chip h-full transition-all duration-500"
               style={{ width: `${props.match.prediction?.drawChance ?? 0}%` }}
             ></div>
             <div
-              class="bg-blue-500 h-full transition-all duration-500"
+              class="bg-accent2 h-full transition-all duration-500"
               style={{
                 width: `${props.match.prediction?.awayWinChance ?? 0}%`,
               }}
@@ -214,17 +366,17 @@ export default function MatchDetailsFuture(props: { match: any }) {
           </div>
           {/* Legende / Prozentzahlen */}
           <div class="flex justify-between items-center mt-2.5 text-xs font-semibold px-0.5">
-            <span class="text-emerald-400">
+            <span class="text-accent">
               Heim ({props.match.prediction?.homeWinChance}%)
             </span>
-            <span class="text-gray-400">
+            <span class="text-ink-muted">
               Remis ({props.match.prediction?.drawChance}%)
             </span>
-            <span class="text-blue-400">
+            <span class="text-accent2">
               Auswärts ({props.match.prediction?.awayWinChance}%)
             </span>
           </div>
-        </div>
+        </Card>
 
         {props.match.standing && (
           <TableComparison
@@ -234,8 +386,8 @@ export default function MatchDetailsFuture(props: { match: any }) {
         )}
 
         {/* 3. FORMKURVE (LAST 5 MATCHES) */}
-        <div class="bg-gray-800/50 rounded-2xl p-4 border border-gray-800 space-y-4">
-          <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 text-center">
+        <Card variant="section" class="p-4 space-y-4">
+          <h3 class="text-xs font-bold uppercase tracking-wider text-ink-muted text-center">
             Aktuelle Formkurve
           </h3>
           <div class="flex items-center justify-between gap-2 px-2">
@@ -253,7 +405,7 @@ export default function MatchDetailsFuture(props: { match: any }) {
                 />
               ))}
             </div>
-            <span class="text-[11px] uppercase tracking-widest font-bold text-gray-600">
+            <span class="text-[11px] uppercase tracking-widest font-bold text-ink-faint">
               Form
             </span>
             {/* Form Team B */}
@@ -271,7 +423,7 @@ export default function MatchDetailsFuture(props: { match: any }) {
               ))}
             </div>
           </div>
-        </div>
+        </Card>
 
         <SquadComparison
           homeRosters={props.match.homeRosters}
@@ -290,11 +442,11 @@ function FormBadge(props: { result: "S" | "U" | "N" }) {
   const styles = () => {
     switch (props.result) {
       case "S": // Sieg
-        return "bg-emerald-500/20 text-emerald-400 border-emerald-500/30";
+        return "bg-accent/20 text-accent border-accent/30";
       case "U": // Unentschieden
-        return "bg-gray-700/40 text-gray-400 border-gray-600/30";
+        return "bg-chip/40 text-ink-muted border-line/30";
       case "N": // Niederlage
-        return "bg-rose-500/20 text-rose-400 border-rose-500/30";
+        return "bg-accent3/20 text-accent3 border-accent3/30";
     }
   };
 

apps/frontend/src/pages/Overview.tsx

@@ -10,6 +10,7 @@ import {
 // import { useSearchParams } from "@solidjs/router";
 import { Header } from "../components/Header";
 import { DayTab } from "../components/DayTab";
+import { Card } from "../components/Card";
 import { ListSkeleton } from "../components/ListSkeleton";
 import { MatchItem } from "../components/MatchItem";
 import { loadMatches, matchStore, type Match } from "../stores/matchStore";
@@ -182,11 +183,11 @@ export function OverviewPage() {
     <>
       <div
         ref={topContainerRef}
-        class="fixed w-full top-0 backdrop-blur-md z-21 bg-gradient-to-b from-gray-800 to-gray-850"
+        class="fixed w-full top-0 backdrop-blur-md z-21 bg-gradient-to-b from-surface/90 to-surface/80"
       >
         <div
           ref={navContainerRef}
-          class="p-3 overflow-x-auto flex gap-2 scrollbar-none border-b border-gray-700/50 flex-none  p-6 border-b border-gray-800 text-center"
+          class="p-3 overflow-x-auto flex gap-2 scrollbar-none border-b border-line/50 flex-none  p-6 border-b border-line text-center"
         >
           <For each={daysList()}>
             {(day) => (
@@ -201,13 +202,13 @@ export function OverviewPage() {
         </div>
 
         <div
-          class={`px-4 py-2 bg-gray-800/40 border-b border-gray-800 flex justify-between items-center flex-none transition-colors duration-300 ${
+          class={`px-4 py-2 bg-surface2/40 border-b border-line flex justify-between items-center flex-none transition-colors duration-300 ${
             matchStore.isLoading
-              ? "bg-emerald-600/30 border-emerald-500/40 bg-striped-loading-dark"
-              : "bg-gray-800/40 border-gray-800"
+              ? "bg-accent/10 border-accent/40 bg-striped-loading-dark"
+              : ""
           }`}
         >
-          <span class="text-xs font-semibold uppercase text-gray-400">
+          <span class="text-xs font-semibold uppercase text-ink-muted">
             {new Date(activeDate()).toLocaleDateString("de-DE", {
               weekday: "long",
               day: "numeric",
@@ -218,7 +219,7 @@ export function OverviewPage() {
       </div>
       <div
         ref={scrollContainerRef}
-        class="flex-1 flex overflow-x-auto snap-x snap-mandatory scrollbar-none scroll-smooth bg-gray-900"
+        class="flex-1 flex overflow-x-auto snap-x snap-mandatory scrollbar-none scroll-smooth bg-app"
       >
         <For each={daysList()}>
           {(day) => {
@@ -250,11 +251,11 @@ export function OverviewPage() {
                             style={{
                               "--delay": `${itemIndex.current++ * 25}ms`,
                             }}
-                            class={`bg-gray-900 flex items-center justify-between border-b border-gray-800 pb-1.5 px-1 ${shouldAnimateOnEnter ? "animate-waterfall" : ""}`}
+                            class={`bg-app flex items-center justify-between border-b border-line pb-1.5 px-1 ${shouldAnimateOnEnter ? "animate-waterfall" : ""}`}
                           >
                             <div class="flex items-center gap-2">
                               {/* sapce for event icon */}
-                              <span class="text-xs font-bold uppercase tracking-wider text-emeral-400">
+                              <span class="text-xs font-bold uppercase tracking-wider text-accent">
                                 {event.eventName}
                               </span>
                             </div>
@@ -262,19 +263,18 @@ export function OverviewPage() {
                           <div class="space-y-2.5">
                             <For each={event.matches}>
                               {(game) => (
-                                <a
+                                <Card
                                   style={{
                                     "--delay": `${itemIndex.current++ * 25}ms`,
                                   }}
                                   href={`/match/${game.id}`}
-                                  class={`bg-gray-800 p-4 rounded-xl border border-gray-700/60 shadow-md flex ${
-                                    shouldAnimateOnEnter
-                                      ? "animate-waterfall"
-                                      : ""
+                                  shadowed
+                                  class={`p-4 flex ${
+                                    shouldAnimateOnEnter ? "animate-waterfall" : ""
                                   }`}
                                 >
                                   <MatchItem game={game} />
-                                </a>
+                                </Card>
                               )}
                             </For>
                           </div>

apps/frontend/src/pages/Settings.tsx

@@ -0,0 +1,170 @@
+import { For, Show } from "solid-js";
+import { themeStore, type ThemeMode } from "../stores/themeStore";
+
+const MODES: { value: ThemeMode; label: string; icon: string }[] = [
+  { value: "light", label: "Hell", icon: "sun" },
+  { value: "dark", label: "Dunkel", icon: "moon" },
+  { value: "auto", label: "Auto", icon: "auto" },
+];
+
+const PRESETS = [
+  "#047857",
+  "#2563eb",
+  "#e11d48",
+  "#d97706",
+  "#7c3aed",
+  "#0284c7",
+  "#16a34a",
+  "#db2777",
+];
+
+function Icon({ name }: { name: string }) {
+  const common = {
+    class: "h-4 w-4",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": 2,
+  } as const;
+  switch (name) {
+    case "sun":
+      return (
+        <svg {...common} viewBox="0 0 24 24">
+          <circle cx="12" cy="12" r="4" />
+          <path
+            stroke-linecap="round"
+            d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"
+          />
+        </svg>
+      );
+    case "moon":
+      return (
+        <svg {...common} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" />
+        </svg>
+      );
+    case "auto":
+      return (
+        <svg {...common} viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M12 3l1.6 3.6L17 8l-3.4 1.4L12 13l-1.6-3.6L7 8l3.4-1.4L12 3z" />
+          <path d="M19 14l.8 1.8 1.7.4-1.4 1.3.3 1.9-1.7-1-1.5 1 .2-2-1.2-1.4 2-.2z" />
+        </svg>
+      );
+  }
+}
+
+export function SettingsPage() {
+  const current = () => themeStore.mode;
+  const customAccent = () => themeStore.accent;
+
+  return (
+    <div class="h-full overflow-y-auto">
+      <header class="sticky top-0 z-20 flex items-center gap-3 px-4 py-3.5 bg-surface/90 backdrop-blur-md border-b border-line">
+        <span class="text-lg font-bold tracking-wide text-accent">
+          Einstellungen
+        </span>
+      </header>
+
+      <div class="p-4 max-w-md mx-auto space-y-6">
+        <section class="bg-surface rounded-2xl border border-line-soft p-4 space-y-3">
+          <div>
+            <h2 class="text-base font-semibold text-ink">Erscheinungsbild</h2>
+            <p class="text-xs text-ink-muted mt-0.5">
+              Wähle, wie die App aussehen soll.
+            </p>
+          </div>
+
+          <div class="grid grid-cols-3 gap-1.5 p-1 bg-surface2 rounded-xl border border-line-soft">
+            <For each={MODES}>
+              {(mode) => (
+                <button
+                  onClick={() => themeStore.set(mode.value)}
+                  class={`flex flex-col items-center gap-1.5 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ${
+                    current() === mode.value
+                      ? "bg-accent text-accent-contrast shadow-md shadow-accent/25"
+                      : "text-ink-muted hover:text-ink hover:bg-elevated/60"
+                  }`}
+                >
+                  <Icon name={mode.icon} />
+                  {mode.label}
+                </button>
+              )}
+            </For>
+          </div>
+
+          <Show when={current() === "auto"}>
+            <p class="text-[11px] text-ink-faint">
+              Auto folgt den Systemeinstellungen deines Geräts.
+            </p>
+          </Show>
+        </section>
+
+        <section class="bg-surface rounded-2xl border border-line-soft p-4 space-y-3">
+          <div>
+            <h2 class="text-base font-semibold text-ink">Akzentfarbe</h2>
+            <p class="text-xs text-ink-muted mt-0.5">
+              Wähle die Hauptfarbe der App.
+            </p>
+          </div>
+
+          <div class="flex items-center gap-3 flex-wrap">
+            <button
+              onClick={() => themeStore.setAccent(null)}
+              class="w-8 h-8 rounded-full border-2 transition-transform active:scale-95 border-ink"
+              style={{
+                background:
+                  "conic-gradient(to right, #047857, #2563eb, #e11d48, #d97706, #047857)",
+              }}
+              aria-label="Standard"
+            ></button>
+
+            <For each={PRESETS}>
+              {(color) => (
+                <button
+                  onClick={() => themeStore.setAccent(color)}
+                  class={`w-8 h-8 rounded-full border-2 transition-transform active:scale-95 ${
+                    customAccent() === color
+                      ? "border-ink ring-2 ring-ink/40"
+                      : "border-line"
+                  }`}
+                  style={{ background: color }}
+                  aria-label={color}
+                ></button>
+              )}
+            </For>
+          </div>
+
+          <div class="flex items-center gap-3 pt-1 border-t border-line-soft">
+            <span class="text-xs font-medium text-ink-muted">Eigene:</span>
+            <label
+              class="relative inline-flex items-center gap-2 cursor-pointer text-xs"
+            >
+              <input
+                type="color"
+                value={customAccent() ?? "#047857"}
+                onChange={(e) =>
+                  themeStore.setAccent((e.currentTarget.value as string) || null)
+                }
+                class="w-9 h-9 rounded-lg cursor-pointer border border-line bg-transparent p-0.5"
+              />
+              <span class="text-ink truncate w-24">
+                {customAccent() ?? "Standard"}
+              </span>
+            </label>
+            <button
+              onClick={() => themeStore.setAccent(null)}
+              class="ml-auto text-xs text-ink-muted hover:text-accent"
+            >
+              Zurücksetzen
+            </button>
+          </div>
+        </section>
+
+        <section class="text-[11px] text-ink-faint leading-relaxed">
+          <p>
+            Kickern – deine Kicker-Liga auf einen Blick.
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/stores/themeStore.ts

@@ -0,0 +1,117 @@
+import { createSignal, createEffect } from "solid-js";
+
+export type ThemeMode = "light" | "dark" | "auto";
+
+const STORAGE_KEY = "theme";
+const ACCENT_KEY = "accent";
+const media = window.matchMedia("(prefers-color-scheme: dark)");
+const root = document.documentElement;
+
+function readStored(): ThemeMode {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === "light" || raw === "dark" || raw === "auto") return raw;
+  } catch {
+    /* ignore */
+  }
+  return "auto";
+}
+
+function isDark(mode: ThemeMode): boolean {
+  if (mode === "auto") return media.matches;
+  return mode === "dark";
+}
+
+function apply(mode: ThemeMode) {
+  root.classList.toggle("dark", isDark(mode));
+}
+
+const [getMode, setModeSignal] = createSignal<ThemeMode>(readStored());
+
+// Track the OS preference so "auto" follows the system live.
+const onSystemChange = () => {
+  if (getMode() === "auto") apply("auto");
+};
+media.addEventListener("change", onSystemChange);
+
+// Persist + apply whenever the mode (or, for auto, the system) changes.
+createEffect(() => {
+  const mode = getMode();
+  if (mode !== "auto") {
+    try {
+      localStorage.setItem(STORAGE_KEY, mode);
+    } catch {
+      /* ignore */
+    }
+  }
+  apply(mode);
+});
+
+export type AccentColor = string | null;
+
+function readableText(color: string): string {
+  const hex = color.replace("#", "");
+  const full =
+    hex.length === 3
+      ? hex
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : hex;
+  const r = parseInt(full.slice(0, 2), 16) / 255;
+  const g = parseInt(full.slice(2, 4), 16) / 255;
+  const b = parseInt(full.slice(4, 6), 16) / 255;
+  const lin = (c: number) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  const lum = 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+  return lum > 0.45 ? "#0b1220" : "#ffffff";
+}
+
+function readAccent(): string | null {
+  try {
+    const raw = localStorage.getItem(ACCENT_KEY);
+    if (raw && /^#[0-9a-fA-F]{6}$/.test(raw)) return raw;
+  } catch {
+    /* ignore */
+  }
+  return null;
+}
+
+const [getAccent, setAccentSignal] = createSignal<AccentColor>(readAccent());
+
+// Apply a custom accent (or fall back to the theme token) + readable contrast.
+function applyAccent(color: string | null) {
+  if (color) {
+    root.style.setProperty("--c-accent", color);
+    root.style.setProperty("--c-accent-contrast", readableText(color));
+  } else {
+    root.style.removeProperty("--c-accent");
+    root.style.removeProperty("--c-accent-contrast");
+  }
+}
+
+createEffect(() => {
+  const color = getAccent();
+  try {
+    if (color) localStorage.setItem(ACCENT_KEY, color);
+    else localStorage.removeItem(ACCENT_KEY);
+  } catch {
+    /* ignore */
+  }
+  applyAccent(color);
+});
+
+export const themeStore = {
+  get mode() {
+    return getMode();
+  },
+  set(mode: ThemeMode) {
+    setModeSignal(mode);
+  },
+  isDark: () => isDark(getMode()),
+  get accent() {
+    return getAccent();
+  },
+  setAccent(color: string | null) {
+    setAccentSignal(color);
+  },
+};