sandrodach
3480859d8a
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 8s
110 lines
6.4 KiB
Markdown
110 lines
6.4 KiB
Markdown
# 🎨 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!
|