Farbschema wie VVL-Tool, Dark Mode und lila Textmarkierung

- Farbwerte (hell/dunkel), IBM Plex Sans und Textmarkierung aus dem VVL-Tool übernommen
- Umschalter Hell/Dunkel in der Kopfzeile, Wahl wird gemerkt (Standard: Systemeinstellung)
- Kopfleiste <hi-topbar> folgt dem Farbschema des jeweiligen Tools

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

frontend/index.html

@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#2B0F71" />
+    <meta name="theme-color" content="#2d1b69" />
+    <script src="/theme-init.js"></script>
     <link rel="icon" type="image/png" href="/favicon.png" />
     <link rel="apple-touch-icon" href="/icon-192.png" />
     <title>Handy-Insel Portal</title>

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { api, type App as PortalApp, type Links, type News, type NewsInput, type User } from './api';
 import { Icon } from './icons';
+import { useTheme } from './useTheme';
 
 function greeting(date = new Date()): string {
   const h = date.getHours();
@@ -25,14 +26,14 @@ export function App() {
       });
   }, []);
 
-  if (!me) return <div className="grid min-h-screen place-items-center text-sm text-slate-500">Lade Portal …</div>;
+  if (!me) return <div className="grid min-h-screen place-items-center text-sm text-fg-3">Lade Portal …</div>;
 
   return (
     <div className="flex min-h-screen flex-col">
       <Header user={me.user} links={me.links} />
       <main className="mx-auto grid w-full max-w-6xl flex-1 gap-12 px-4 pb-16 pt-10 sm:px-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:pt-14">
         <section>
-          <h1 className="text-3xl font-bold leading-tight text-ink sm:text-4xl">
+          <h1 className="text-3xl font-bold leading-tight text-fg sm:text-4xl">
             {greeting()},
             <br />
             {me.user.firstName}.
@@ -49,6 +50,7 @@ export function App() {
 
 function Header({ user, links }: { user: User; links: Links }) {
   const [open, setOpen] = useState(false);
+  const { theme, toggle } = useTheme();
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -65,19 +67,28 @@ function Header({ user, links }: { user: User; links: Links }) {
   }, [open]);
 
   return (
-    <header className="sticky top-0 z-20 border-b border-slate-200 bg-white">
+    <header className="sticky top-0 z-20 border-b border-line bg-surface">
       <div className="flex h-14 items-center justify-between px-4 sm:px-6">
         <a href="/" className="flex items-center gap-2.5" aria-label="Handy-Insel Portal">
-          <img src="/icon-192.png" alt="" className="h-8 w-8" />
-          <span className="text-lg tracking-tight text-ink">
+          <img src="/icon-192.png" alt="" className="logo-badge h-8 w-8 rounded-full" />
+          <span className="text-lg tracking-tight text-fg">
             Handy-<span className="font-bold">Insel</span>
           </span>
         </a>
-        <div className="relative" ref={ref}>
+        <div className="relative flex items-center gap-2" ref={ref}>
+          <button
+            type="button"
+            onClick={toggle}
+            className="grid h-9 w-9 place-items-center rounded-full text-fg-2 hover:bg-surface-3 hover:text-fg"
+            title={theme === 'dark' ? 'Helles Design' : 'Dunkles Design'}
+            aria-label={theme === 'dark' ? 'Helles Design' : 'Dunkles Design'}
+          >
+            <Icon name={theme === 'dark' ? 'sun' : 'moon'} className="h-[18px] w-[18px]" />
+          </button>
           <button
             type="button"
             onClick={() => setOpen((v) => !v)}
-            className="grid h-9 w-9 place-items-center rounded-full border-2 border-slate-300 bg-slate-100 text-xs font-bold text-ink hover:border-brand-500"
+            className="grid h-9 w-9 place-items-center rounded-full border-2 border-line-2 bg-surface-3 text-xs font-bold text-fg hover:border-accent"
             aria-haspopup="menu"
             aria-expanded={open}
             title={user.name}
@@ -87,17 +98,17 @@ function Header({ user, links }: { user: User; links: Links }) {
           {open && (
             <div
               role="menu"
-              className="absolute right-0 mt-2 w-64 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-lg"
+              className="absolute right-0 top-full mt-2 w-64 overflow-hidden rounded-xl border border-line bg-surface shadow-pop"
             >
-              <div className="border-b border-slate-100 px-4 py-3">
-                <div className="font-semibold text-ink">{user.name}</div>
-                <div className="truncate text-sm text-slate-500">{user.email}</div>
+              <div className="border-b border-line px-4 py-3">
+                <div className="font-semibold text-fg">{user.name}</div>
+                <div className="truncate text-sm text-fg-3">{user.email}</div>
               </div>
-              <a role="menuitem" href={links.account} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-brand-50">
-                <Icon name="user" className="h-4 w-4 text-brand-600" /> Konto &amp; Passwort
+              <a role="menuitem" href={links.account} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accent-soft">
+                <Icon name="user" className="h-4 w-4 text-accent" /> Konto &amp; Passwort
               </a>
-              <a role="menuitem" href={links.logout} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-brand-50">
-                <Icon name="logout" className="h-4 w-4 text-brand-600" /> Abmelden
+              <a role="menuitem" href={links.logout} className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-accent-soft">
+                <Icon name="logout" className="h-4 w-4 text-accent" /> Abmelden
               </a>
             </div>
           )}
@@ -119,14 +130,14 @@ function AppSections({ apps, error }: { apps: PortalApp[] | null; error: string
   if (apps === null) {
     return (
       <SectionTitle title="Anwendungen">
-        <div className="text-sm text-slate-500">Lade Anwendungen …</div>
+        <div className="text-sm text-fg-3">Lade Anwendungen …</div>
       </SectionTitle>
     );
   }
   if (!apps.length) {
     return (
       <SectionTitle title="Anwendungen">
-        <p className="text-sm text-slate-600">
+        <p className="text-sm text-fg-2">
           {error || 'Für dein Konto sind noch keine Anwendungen freigeschaltet. Bitte wende dich an einen Admin.'}
         </p>
       </SectionTitle>
@@ -152,8 +163,8 @@ function AppSections({ apps, error }: { apps: PortalApp[] | null; error: string
 function SectionTitle({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="mt-12">
-      <h2 className="mb-5 flex items-center gap-2 text-base font-semibold text-ink">
-        <Icon name="grid" className="h-4 w-4 text-slate-500" />
+      <h2 className="mb-5 flex items-center gap-2 text-base font-semibold text-fg">
+        <Icon name="grid" className="h-4 w-4 text-fg-3" />
         {title}
       </h2>
       {children}
@@ -170,10 +181,10 @@ function AppTile({ app }: { app: PortalApp }) {
       title={app.description || app.name}
       className="group flex flex-col items-center gap-2 text-center"
     >
-      <span className="grid h-[72px] w-[72px] place-items-center rounded-xl border border-slate-200 bg-white shadow-[0_1px_2px_rgba(15,23,42,0.04)] transition group-hover:-translate-y-0.5 group-hover:border-brand-200 group-hover:shadow-md">
+      <span className="grid h-[72px] w-[72px] place-items-center rounded-xl border border-line bg-[var(--tile-icon-bg)] shadow-card transition group-hover:-translate-y-0.5 group-hover:border-line-2 group-hover:shadow-pop">
         <img src={app.iconUrl} alt="" className="h-10 w-10 object-contain" loading="lazy" />
       </span>
-      <span lang="de" className="w-full hyphens-auto break-words text-[13px] font-medium leading-tight text-ink">{app.name}</span>
+      <span lang="de" className="w-full hyphens-auto break-words text-[13px] font-medium leading-tight text-fg">{app.name}</span>
     </a>
   );
 }
@@ -212,7 +223,7 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
   return (
     <aside className="lg:pt-[4.5rem]">
       <div className="mb-4 flex items-center justify-between gap-4">
-        <h2 className="flex items-center gap-2 text-base font-semibold text-ink">
+        <h2 className="flex items-center gap-2 text-base font-semibold text-fg">
           <Icon name="megaphone" className="h-4 w-4" />
           Aktuelles
         </h2>
@@ -220,7 +231,7 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
           <button
             type="button"
             onClick={() => setEditing('new')}
-            className="inline-flex items-center gap-1.5 rounded-md border border-brand-500 bg-white px-3 py-1 text-xs font-semibold text-brand-600 hover:bg-brand-50"
+            className="inline-flex items-center gap-1.5 rounded-md border border-accent bg-surface px-3 py-1 text-xs font-semibold text-accent hover:bg-accent-soft"
           >
             <Icon name="plus" className="h-3.5 w-3.5" /> Neuigkeit
           </button>
@@ -231,15 +242,15 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
         <NewsForm initial={editing === 'new' ? undefined : editing} onCancel={() => setEditing(null)} onSave={save} />
       )}
 
-      {error && <p className="text-sm text-red-600">{error}</p>}
-      {news && !news.length && !editing && <p className="text-sm text-slate-600">Es gibt noch keine Neuigkeiten.</p>}
+      {error && <p className="text-sm text-danger">{error}</p>}
+      {news && !news.length && !editing && <p className="text-sm text-fg-2">Es gibt noch keine Neuigkeiten.</p>}
 
       <ul className="space-y-3">
         {news?.map((item) => (
-          <li key={item.id} className="rounded-xl border border-slate-200 bg-white p-4">
+          <li key={item.id} className="rounded-xl border border-line bg-surface p-4">
             <div className="flex items-start justify-between gap-3">
-              <h3 className="font-semibold text-ink">
-                {item.pinned && <Icon name="pin" className="-mt-0.5 mr-1.5 inline h-3.5 w-3.5 text-brand-600" />}
+              <h3 className="font-semibold text-fg">
+                {item.pinned && <Icon name="pin" className="-mt-0.5 mr-1.5 inline h-3.5 w-3.5 text-accent" />}
                 {item.title}
               </h3>
               {canEdit && (
@@ -249,10 +260,10 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {
                 </div>
               )}
             </div>
-            <div className="mt-0.5 text-xs text-slate-500">
+            <div className="mt-0.5 text-xs text-fg-3">
               {dateFmt.format(new Date(item.createdAt))} · {item.author}
             </div>
-            {item.body && <p className="mt-2 whitespace-pre-line text-sm leading-relaxed text-slate-700">{item.body}</p>}
+            {item.body && <p className="mt-2 whitespace-pre-line text-sm leading-relaxed text-fg-2">{item.body}</p>}
           </li>
         ))}
       </ul>
@@ -267,7 +278,7 @@ function IconButton({ label, icon, onClick }: { label: string; icon: 'pencil' |
       onClick={onClick}
       title={label}
       aria-label={label}
-      className="grid h-7 w-7 place-items-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-ink"
+      className="grid h-7 w-7 place-items-center rounded-md text-fg-3 hover:bg-surface-3 hover:text-fg"
     >
       <Icon name={icon} className="h-3.5 w-3.5" />
     </button>
@@ -301,24 +312,24 @@ function NewsForm({
     }
   }
 
-  const field = 'w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none';
+  const field = 'w-full rounded-md border border-line-2 bg-surface px-3 py-2 text-sm focus:border-accent focus:outline-none';
   return (
-    <form onSubmit={submit} className="mb-4 space-y-3 rounded-xl border border-brand-200 bg-white p-4">
+    <form onSubmit={submit} className="mb-4 space-y-3 rounded-xl border border-line-2 bg-surface p-4">
       <input className={field} placeholder="Titel" value={title} onChange={(e) => setTitle(e.target.value)} maxLength={200} required autoFocus />
       <textarea className={`${field} min-h-28`} placeholder="Text (optional)" value={body} onChange={(e) => setBody(e.target.value)} />
       <label className="flex items-center gap-2 text-sm">
-        <input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} className="accent-brand-600" />
+        <input type="checkbox" checked={pinned} onChange={(e) => setPinned(e.target.checked)} className="accent-[var(--accent)]" />
         Oben anheften
       </label>
-      {error && <p className="text-sm text-red-600">{error}</p>}
+      {error && <p className="text-sm text-danger">{error}</p>}
       <div className="flex justify-end gap-2">
-        <button type="button" onClick={onCancel} className="rounded-md px-3 py-1.5 text-sm text-slate-600 hover:bg-slate-100">
+        <button type="button" onClick={onCancel} className="rounded-md px-3 py-1.5 text-sm text-fg-2 hover:bg-surface-3">
           Abbrechen
         </button>
         <button
           type="submit"
           disabled={busy}
-          className="rounded-md bg-brand-600 px-4 py-1.5 text-sm font-semibold text-white hover:bg-brand-700 disabled:opacity-60"
+          className="rounded-md bg-accent px-4 py-1.5 text-sm font-semibold text-on-accent hover:bg-accent-2 disabled:opacity-60"
         >
           {initial ? 'Speichern' : 'Veröffentlichen'}
         </button>

frontend/src/icons.tsx

@@ -8,6 +8,8 @@ const paths = {
   trash: 'M9 3h6l1 2h4v2H4V5h4zm-3 6h12l-1 12H7z',
   user: 'M12 12a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9zm-8 9c0-4.4 3.6-7 8-7s8 2.6 8 7z',
   logout: 'M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5v-2H5V5h5zm6.6 4.4L15.2 8.8 17.4 11H9v2h8.4l-2.2 2.2 1.4 1.4L21.2 12z',
+  moon: 'M20.4 14.6A8.5 8.5 0 0 1 9.4 3.6a8.5 8.5 0 1 0 11 11z',
+  sun: 'M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm-1-5h2v3h-2zm0 17h2v3h-2zM2 11h3v2H2zm17 0h3v2h-3zM4.2 5.6l1.4-1.4 2.1 2.1-1.4 1.4zm12.1 12.1 1.4-1.4 2.1 2.1-1.4 1.4zM4.2 18.4l2.1-2.1 1.4 1.4-2.1 2.1zM16.3 6.3l2.1-2.1 1.4 1.4-2.1 2.1z',
 } as const;
 
 export function Icon({ name, className }: { name: keyof typeof paths; className?: string }) {

frontend/src/main.tsx

@@ -1,5 +1,9 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import '@fontsource/ibm-plex-sans/400.css';
+import '@fontsource/ibm-plex-sans/500.css';
+import '@fontsource/ibm-plex-sans/600.css';
+import '@fontsource/ibm-plex-sans/700.css';
 import './styles.css';
 import { App } from './App';
 

frontend/src/styles.css

@@ -1,25 +1,97 @@
 @import "tailwindcss";
 
-@theme {
-  --color-brand-50: #f3f0fd;
-  --color-brand-100: #e6defb;
-  --color-brand-200: #cbbdf7;
-  --color-brand-500: #6a3de8;
-  --color-brand-600: #5a2fd6;
-  --color-brand-700: #4a22b8;
-  --color-brand-900: #2b0f71;
-  --color-ink: #1f2a52;
-  --color-canvas: #f4f4f5;
-  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
+/*
+ * Farbschema wie im VVL-Tool (lavendel-getönte Purple-Palette, Light + Dark).
+ * Umgeschaltet über :root[data-theme="…"], gesetzt von theme-init.js bzw. useTheme.
+ */
+:root,
+:root[data-theme="light"] {
+  --bg: #f1eef8;
+  --surface: #ffffff;
+  --surface-2: #faf8fd;
+  --surface-3: #f1edf8;
+  --border: #e5e0f0;
+  --border-2: #d6cee8;
+  --text: #211a38;
+  --text-2: #5b5372;
+  --text-3: #8a83a0;
+  --primary: #2d1b69;
+  --accent: #5e35b1;
+  --accent-2: #7c4dd6;
+  --accent-soft: #ede7fa;
+  --on-accent: #ffffff;
+  --red: #d42a4e;
+  --tile-icon-bg: #ffffff;
+  --shadow: 0 1px 2px rgba(45, 27, 105, 0.06), 0 4px 16px rgba(45, 27, 105, 0.06);
+  --shadow-lg: 0 8px 40px rgba(45, 27, 105, 0.18);
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  --bg: #120c22;
+  --surface: #1c1436;
+  --surface-2: #221940;
+  --surface-3: #2a2049;
+  --border: #312551;
+  --border-2: #3f3167;
+  --text: #ece8f6;
+  --text-2: #ada5c6;
+  --text-3: #7b7396;
+  --primary: #c3adee;
+  --accent: #a88beb;
+  --accent-2: #bca4f2;
+  --accent-soft: #2a2048;
+  --on-accent: #1b1233;
+  --red: #f26982;
+  --tile-icon-bg: #f4f0fc;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 20px rgba(0, 0, 0, 0.35);
+  --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.55);
+  color-scheme: dark;
+}
+
+@theme inline {
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-surface-2: var(--surface-2);
+  --color-surface-3: var(--surface-3);
+  --color-line: var(--border);
+  --color-line-2: var(--border-2);
+  --color-fg: var(--text);
+  --color-fg-2: var(--text-2);
+  --color-fg-3: var(--text-3);
+  --color-primary: var(--primary);
+  --color-accent: var(--accent);
+  --color-accent-2: var(--accent-2);
+  --color-accent-soft: var(--accent-soft);
+  --color-on-accent: var(--on-accent);
+  --color-danger: var(--red);
+  --shadow-card: var(--shadow);
+  --shadow-pop: var(--shadow-lg);
+  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
 }
 
 html,
 body {
-  background: var(--color-canvas);
-  color: var(--color-ink);
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* Markierter Text in Flieder statt Browser-Blau (wie im VVL-Tool) */
+::selection {
+  background: #d7c6f7;
+  color: #1b1233;
+}
+:root[data-theme="dark"] ::selection {
+  background: #5b3fa0;
+  color: #f4efff;
 }
 
 :focus-visible {
-  outline: 2px solid var(--color-brand-500);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
+
+/* Das dunkle Insel-Logo braucht auf dunklem Grund einen hellen Rand */
+:root[data-theme="dark"] .logo-badge {
+  box-shadow: 0 0 0 2px #f4f0fc;
+}

frontend/src/useTheme.ts

@@ -0,0 +1,24 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type Theme = 'light' | 'dark';
+
+function current(): Theme {
+  return document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light';
+}
+
+/** Hell/Dunkel-Umschaltung; merkt sich die Wahl (localStorage "hi-theme"). */
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(current);
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    try {
+      localStorage.setItem('hi-theme', theme);
+    } catch {
+      /* Speicher gesperrt */
+    }
+  }, [theme]);
+
+  const toggle = useCallback(() => setTheme((t) => (t === 'dark' ? 'light' : 'dark')), []);
+  return { theme, toggle };
+}