feat: add customizable accent color

apps/frontend/index.html

@@ -24,6 +24,20 @@
           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 */
         }

apps/frontend/src/App.tsx

@@ -1,7 +1,8 @@
 import { OverviewPage } from "./pages/Overview";
 import { MatchPage } from "./pages/MatchDetails";
 import { SettingsPage } from "./pages/Settings";
-import { type ParentProps, onMount, onCleanup, createSignal } from "solid-js";
+import { BottomNav } from "./components/BottomNav";
+import { type ParentProps, onMount, onCleanup, createSignal, Show } from "solid-js";
 
 function Layout(props: ParentProps) {
   return (
@@ -68,6 +69,7 @@ function App() {
 
   return (
     <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>
@@ -78,6 +80,8 @@ function App() {
           <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/pages/Overview.tsx

@@ -215,28 +215,6 @@ export function OverviewPage() {
               month: "long",
             })}
           </span>
-          <a href="/einstellungen" class="shrink-0">
-            <button
-              aria-label="Einstellungen"
-              class="p-1.5 -m-0.5 rounded-lg text-ink-muted hover:text-ink hover:bg-elevated/60 transition-colors"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-              >
-                <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>
-            </button>
-          </a>
         </div>
       </div>
       <div

apps/frontend/src/pages/Settings.tsx

@@ -7,6 +7,17 @@ const MODES: { value: ThemeMode; label: string; icon: string }[] = [
   { 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",
@@ -43,6 +54,7 @@ function Icon({ name }: { name: string }) {
 
 export function SettingsPage() {
   const current = () => themeStore.mode;
+  const customAccent = () => themeStore.accent;
 
   return (
     <div class="h-full overflow-y-auto">
@@ -86,6 +98,67 @@ export function SettingsPage() {
           </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.

apps/frontend/src/stores/themeStore.ts

@@ -3,6 +3,7 @@ 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;
 
@@ -46,6 +47,59 @@ createEffect(() => {
   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();
@@ -54,4 +108,10 @@ export const themeStore = {
     setModeSignal(mode);
   },
   isDark: () => isDark(getMode()),
+  get accent() {
+    return getAccent();
+  },
+  setAccent(color: string | null) {
+    setAccentSignal(color);
+  },
 };