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/`](../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:

```css
: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`](../frontend/src/themes/theme-dark.css) | Standard Dark Slate / Monochrom | Streng eckig (`0px` Cards, `2px` Buttons) |
| `light` | [`theme-light.css`](../frontend/src/themes/theme-light.css) | Daylight Clean White / Minimalistisch | Modern dezent (`4px` Cards, `4px` Buttons) |
| `high-contrast` | [`theme-high-contrast.css`](../frontend/src/themes/theme-high-contrast.css) | Reines Schwarz/Weiß mit AAA-Kontrast | Streng eckig (`0px`, kräftige Rahmen) |
| `soft` | [`theme-soft.css`](../frontend/src/themes/theme-soft.css) | Warmes Soft Slate mit Indigo-Akzent | Weich gerundet (`12px` Cards, `8px` Buttons) |
| *Template* | [`theme-template.css`](../frontend/src/themes/theme-template.css) | Vollständig dokumentierte Kopiervorlage | Frei anpassbar |

---

## 🔌 4. Tailwind-Bridge & Semantische Klassen

In [`frontend/src/index.css`](../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`](../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!