MindSift/Doku/theming.md

🎨 Single-File CSS Theming Engine & Design-System

MindSift implementiert ein radikal einfaches, modulares Theming-System. Anstatt Farb- und Geometriewerte in Dutzenden Tailwind-Klassen über hunderte Komponenten zu verstreuen, wird das komplette Erscheinungsbild der Plattform über eine einzige CSS-Datei pro Theme gesteuert.

---

💡 1. Philosophie: 1 Datei = 1 komplettes Theme

Jedes Theme liegt im Verzeichnis frontend/src/themes/ und definiert alle visuellen Eigenschaften über standardisierte CSS-Variablen.

Trennung von Struktur und Design

• React-Komponenten definieren ausschließlich semantische Klassen (wie .panel-surface, .input-field, .btn-primary, text-main, bg-canvas).
• Die aktive Theme-CSS-Datei bestimmt, welche konkreten Farben, Kontraste, Rahmenbreiten und Ecken-Rundungen diesen Klassen zugewiesen werden.

---

🧱 2. Die 6 standardisierten Variablen-Blöcke

Jede Theme-Datei gliedert sich in sechs exakt definierte Bereiche:

:root[data-theme="dein-theme"] {
  /* ==========================================================================
     1. AKZENTFARBE (Fokus, Primäraktionen, Highlights)
     ========================================================================== */
  --accent: #2563eb;                    /* Primäre Schaltflächen & aktive Tabs */
  --accent-hover: #3b82f6;              /* Hover-Zustand */
  --accent-dim: rgba(37, 99, 235, 0.15);/* Transparenter Hintergrund für Badges */
  --accent-contrast: #ffffff;           /* Textfarbe auf Akzentflächen */

  /* ==========================================================================
     2. OBERFLÄCHEN & HINTERGRÜNDE
     ========================================================================== */
  --bg-canvas: #0e1013;                 /* Grundhintergrund der gesamten Seite */
  --bg-panel: #16181d;                  /* Panels, Karten, Modals & Seitenleisten */
  --bg-panel-elevated: #1f2229;         /* Hervorgehobene Elemente & Hover-Panels */
  --bg-input: #121418;                  /* Hintergrund von Textfeldern */
  --bg-code: #0b0c0f;                   /* Codeblöcke & Tastatur-Badges */
  --bg-overlay: rgba(0, 0, 0, 0.75);    /* Modal-Hintergrund Backdrop */

  /* ==========================================================================
     3. TEXT & KONTRASTE
     ========================================================================== */
  --text-main: #f4f4f5;                 /* Haupttext, Überschriften, Labels */
  --text-muted: #a1a1aa;                /* Sekundärtext, Beschreibungen */
  --text-faint: #71717a;                /* Dezentester Text, Tastaturhinweise */
  --text-on-accent: #ffffff;            /* Lesbarer Text auf --accent */

  /* ==========================================================================
     4. RAHMEN, LINIEN & SCHATTEN
     ========================================================================== */
  --border-color: rgba(255, 255, 255, 0.08); /* Standard-Trennlinien */
  --border-strong: rgba(255, 255, 255, 0.18);/* Fokussierte Rahmen, Tabs */
  --shadow-panel: 0 4px 20px -2px rgba(0, 0, 0, 0.45); /* Box-Shadows */

  /* ==========================================================================
     5. STATUS- & SIGNALFARBEN
     ========================================================================== */
  --status-ok: #22c55e;                 /* Erledigt, Online, Aktiv (Grün) */
  --status-err: #ef4444;                /* Fehler, Löschen, Dringend (Rot) */
  --status-warn: #eab308;               /* Wichtig, Warnung, Gesperrt (Gelb) */
  --status-info: #3b82f6;               /* Hinweise, Information (Blau) */

  /* ==========================================================================
     6. RUNDUNGEN / GEOMETRIE
     ========================================================================== */
  --radius-card: 0px;                   /* Eckenrundung von Panels & Karten */
  --radius-btn: 2px;                    /* Eckenrundung von Schaltflächen */
  --radius-input: 2px;                  /* Eckenrundung von Eingabefeldern */
  --radius-checkbox: 2px;               /* Checkboxen */
  --radius-pill: 9999px;                /* Pillen & Status-Badges */
}

---

🎭 3. Verfügbare Standard-Themes

Theme-ID	Datei	Stil & Charakter	Standard-Geometrie
dark	theme-dark.css	Standard Dark Slate / Monochrom	Streng eckig (0px Cards, 2px Buttons)
light	theme-light.css	Daylight Clean White / Minimalistisch	Modern dezent (4px Cards, 4px Buttons)
high-contrast	theme-high-contrast.css	Reines Schwarz/Weiß mit AAA-Kontrast	Streng eckig (0px, kräftige Rahmen)
soft	theme-soft.css	Warmes Soft Slate mit Indigo-Akzent	Weich gerundet (12px Cards, 8px Buttons)
Template	theme-template.css	Vollständig dokumentierte Kopiervorlage	Frei anpassbar

---

🔌 4. Tailwind-Bridge & Semantische Klassen

In frontend/src/index.css und tailwind.config.js sind die semantischen Utility-Klassen definiert, die sich automatisch an das gewählte Theme anpassen:

• .panel-surface: Wendet --bg-panel, --border-color und --radius-card an.
• .input-field: Wendet --bg-input, --border-color, --radius-input und --text-main an.
• .btn-primary: Akzent-Schaltfläche mit --accent, --accent-hover, --text-on-accent und --radius-btn.
• .btn-action: Sekundär-Aktion mit dezentem Rahmen und Hover-Zustand.
• .checkbox-square: Kontrollkästchen mit --radius-checkbox.
• .capture-pill: Spezial-Pille für die Desktop-Schnelleingabeleiste mit --radius-pill.

---

🛠️ 5. Ein eigenes Theme erstellen

Um ein neues Theme (z.B. „Nordic Blue" oder „Cyberpunk") hinzuzufügen:

1. Kopiere frontend/src/themes/theme-template.css nach frontend/src/themes/theme-meintheme.css.
2. Ändere den Selektor :root[data-theme="template"] in :root[data-theme="meintheme"].
3. Passe Farben und Rundungen nach Belieben an.
4. Importiere die CSS-Datei in frontend/src/lib/theme.ts und trage das Theme im AVAILABLE_THEMES-Array ein.
5. Das neue Theme steht sofort in den Kontoeinstellungen und im Profil-Dropdown zur Verfügung!