Overlay Theme System – Zentrale CSS-Tokens, Themes & Presets für alle Widgets #96

New issue

Open

opened 2026-07-15 21:15:08 +02:00 by frank · 0 comments

frank commented

2026-07-15 21:15:08 +02:00

Owner

Kontext

Aktuell hat jedes Widget (#39, #45, #93, #94, #95) seine eigene Styling-Konfiguration. Streamer müssen Farbe, Schriftart und Größe für jedes Widget einzeln einstellen – aufwändig und inkonsistent.

Ein zentrales Theme-System mit CSS-Tokens (Custom Properties), globalen Themes und widget-spezifischen Overrides macht die gesamte Overlay-Suite einheitlich und professionell.

Ziel

Globales Theme-System für alle Overlay-Widgets:

1. CSS-Token-System

Farb-Palette:
- --primary: Primärfarbe (Akzente, Highlights)
- --secondary: Sekundärfarbe (Sub-Text, Badges)
- --background: Hintergrundfarbe (Overlay-Hintergrund)
- --surface: Oberflächenfarbe (Widget-Karten, Boxen)
- --text: Textfarbe (Haupttext)
- --text-muted: Textfarbe gedimmt (Subtitel, Timestamps)
- --success: Grün (Follows, Subs, positive Events)
- --warning: Gelb/Orange (Raid, Aufmerksamkeit)
- --danger: Rot (Bits, große Events)
- --info: Blau (Informationen, Links)
Typografie:
- --font-family: Schriftart (Google Fonts + Custom Upload)
- --font-size-xs: Extra klein (12px)
- --font-size-sm: Klein (14px)
- --font-size-base: Basis (16px)
- --font-size-lg: Groß (20px)
- --font-size-xl: Extra groß (24px)
- --font-size-xxl: Titel (36px)
- --font-weight-normal, --font-weight-bold
Abstände & Größen:
- --spacing-xs bis --spacing-xxl (4px bis 32px)
- --border-radius: Ecken-Abrundung (4px / 8px / 12px)
- --border-width: Rahmenstärke
- --shadow: Box-Schatten (Subtle / Medium / Strong)
Animation:
- --transition-speed: Einblend-Dauer (150ms / 300ms / 500ms)
- --animation-easing: Easing-Funktion (ease / ease-out / cubic-bezier)
- --opacity-dimmed: Gedimmte Opacity (0.5 / 0.7)

2. Vorgefertigte Themes

Dark Core: Klassisches Dark-Theme, dezente Farben, für die meisten Streams
Light Breeze: Helles Theme, Pastellfarben, für helle/IRL-Streams
Neon Synthwave: Pink/Blau/Lila, Glow-Effekte, für Gaming/Vaporwave
Minimal White: Weiß/Schwarz, serifenlos, clean
Forest: Grün/Braun/Natur-Töne, für IRL/Nature-Streams
Sunset: Orange/Rot/Gelb, warm, für kreative/Art-Streams
Ocean: Blau/Türkis, kühl, für Tech/Gaming
Custom: Vollständig benutzerdefiniert

Global: Theme gilt für alle Widgets (Default)
Per-Kategorie: Z. B. Chat-Overlay hat anderes Theme als Kappagen
Per-Widget: Einzelnes Widget hat eigene Farben (z. B. Sub-Bomb immer Gold)
Override-Hierarchie: Widget-spezifisch > Kategorie > Global (Cascading)
Reset-Button: "Auf globales Theme zurücksetzen" pro Widget

4. Theme-Editor (Admin-UI)

Color Picker: Visuelle Farbauswahl pro CSS-Token (Farbrad + Hex-Input)
Font-Picker: Google Fonts-Dropdown mit Live-Vorschau
Slider: Border-Radius, Shadow-Intensität, Transition-Speed
Vorschau-Fenster: Aktualisiert sich live mit den geänderten Tokens
Theme-Manager:
- Aktuelle Theme-Konfiguration speichern
- Themes benennen/löschen/exportieren
- Theme-Import (JSON-Datei)
- Preset-Browser (Vorschau aller vorgefertigten Themes)
Widget-Vorschau: Zeigt ausgewähltes Widget mit aktuellen Theme-Tokens

5. Integration mit Overlay-Server

Theme-Endpoint: /overlay/theme.css – liefert CSS-Tokens als Stylesheet
Widgets laden Theme automatisch: Jedes Widget lädt zuerst das Theme-CSS, dann eigenes CSS
Hot-Reload: Theme-Änderungen werden per WebSocket an alle aktiven Overlay-Fenster gesendet
Server-Side Rendering: Theme-Tokens werden in HTML als <style>-Block eingefügt
Fallback: Wenn Theme nicht geladen werden kann → Default-Theme (Dark Core)

6. Technische Umsetzung

CSS Custom Properties (Variablen) – native Browser-Unterstützung, kein CSS-Präprozessor nötig
Theme-Konfiguration in SQLite (overlay_themes-Tabelle)
Theme-Export als JSON mit allen Tokens + Metadaten (Name, Autor, Version)
JS document.documentElement.style.setProperty() für Hot-Reload
Kein CSS-Präprozessor im Build-Prozess nötig

Technische Leitplanken

CSS-Custom-Properties (kein Sass/Less – minimale Abhängigkeiten)
Theme-Datei wird vom Overlay-Server generiert und gecached (etag-basiert)
Hot-Reload via WebSocket: Nur geänderte Tokens übertragen (Diff-basiert)
Theme-Speicher in SQLite (einfache Key-Value-Tabelle für Tokens)
Backup: Theme-Konfiguration als JSON exportierbar (für Sharing/Backup)
Kein externer Service: Alle Fonts werden entweder von Google Fonts CDN geladen oder lokal gespeichert

Akzeptanz

7+ vorgefertigte Themes sind auswählbar (Dark, Light, Neon, Minimal, Forest, Sunset, Ocean)
CSS-Token-System mit 20+ Tokens (Farben, Typografie, Abstände, Animation)
Theme-Editor mit Color Picker, Font-Selector und Slider
Widget-Override-Hierarchie (Global > Kategorie > Widget) funktioniert
Hot-Reload: Theme-Änderungen werden live an alle Overlays übertragen
Theme-Export/Import als JSON
Theme-Endpoint /overlay/theme.css liefert gültiges CSS
Alle Widgets (#39, #45, #93, #94, #95) nutzen das Theme-System

Referenzen

StreamElements: SE_API key-value store for widget configs
Own3d: Scene Builder with design presets
Meld Studio: Built-in theme system

## Kontext Aktuell hat jedes Widget (#39, #45, #93, #94, #95) seine eigene Styling-Konfiguration. Streamer müssen Farbe, Schriftart und Größe für jedes Widget einzeln einstellen – aufwändig und inkonsistent. Ein zentrales **Theme-System** mit CSS-Tokens (Custom Properties), globalen Themes und widget-spezifischen Overrides macht die gesamte Overlay-Suite einheitlich und professionell. ## Ziel **Globales Theme-System** für alle Overlay-Widgets: ### 1. CSS-Token-System - **Farb-Palette**: - `--primary`: Primärfarbe (Akzente, Highlights) - `--secondary`: Sekundärfarbe (Sub-Text, Badges) - `--background`: Hintergrundfarbe (Overlay-Hintergrund) - `--surface`: Oberflächenfarbe (Widget-Karten, Boxen) - `--text`: Textfarbe (Haupttext) - `--text-muted`: Textfarbe gedimmt (Subtitel, Timestamps) - `--success`: Grün (Follows, Subs, positive Events) - `--warning`: Gelb/Orange (Raid, Aufmerksamkeit) - `--danger`: Rot (Bits, große Events) - `--info`: Blau (Informationen, Links) - **Typografie**: - `--font-family`: Schriftart (Google Fonts + Custom Upload) - `--font-size-xs`: Extra klein (12px) - `--font-size-sm`: Klein (14px) - `--font-size-base`: Basis (16px) - `--font-size-lg`: Groß (20px) - `--font-size-xl`: Extra groß (24px) - `--font-size-xxl`: Titel (36px) - `--font-weight-normal`, `--font-weight-bold` - **Abstände & Größen**: - `--spacing-xs` bis `--spacing-xxl` (4px bis 32px) - `--border-radius`: Ecken-Abrundung (4px / 8px / 12px) - `--border-width`: Rahmenstärke - `--shadow`: Box-Schatten (Subtle / Medium / Strong) - **Animation**: - `--transition-speed`: Einblend-Dauer (150ms / 300ms / 500ms) - `--animation-easing`: Easing-Funktion (ease / ease-out / cubic-bezier) - `--opacity-dimmed`: Gedimmte Opacity (0.5 / 0.7) ### 2. Vorgefertigte Themes - **Dark Core**: Klassisches Dark-Theme, dezente Farben, für die meisten Streams - **Light Breeze**: Helles Theme, Pastellfarben, für helle/IRL-Streams - **Neon Synthwave**: Pink/Blau/Lila, Glow-Effekte, für Gaming/Vaporwave - **Minimal White**: Weiß/Schwarz, serifenlos, clean - **Forest**: Grün/Braun/Natur-Töne, für IRL/Nature-Streams - **Sunset**: Orange/Rot/Gelb, warm, für kreative/Art-Streams - **Ocean**: Blau/Türkis, kühl, für Tech/Gaming - **Custom**: Vollständig benutzerdefiniert ### 3. Widget-Override-Modell - **Global**: Theme gilt für alle Widgets (Default) - **Per-Kategorie**: Z. B. Chat-Overlay hat anderes Theme als Kappagen - **Per-Widget**: Einzelnes Widget hat eigene Farben (z. B. Sub-Bomb immer Gold) - **Override-Hierarchie**: Widget-spezifisch > Kategorie > Global (Cascading) - **Reset-Button**: "Auf globales Theme zurücksetzen" pro Widget ### 4. Theme-Editor (Admin-UI) - **Color Picker**: Visuelle Farbauswahl pro CSS-Token (Farbrad + Hex-Input) - **Font-Picker**: Google Fonts-Dropdown mit Live-Vorschau - **Slider**: Border-Radius, Shadow-Intensität, Transition-Speed - **Vorschau-Fenster**: Aktualisiert sich live mit den geänderten Tokens - **Theme-Manager**: - Aktuelle Theme-Konfiguration speichern - Themes benennen/löschen/exportieren - Theme-Import (JSON-Datei) - Preset-Browser (Vorschau aller vorgefertigten Themes) - **Widget-Vorschau**: Zeigt ausgewähltes Widget mit aktuellen Theme-Tokens ### 5. Integration mit Overlay-Server - **Theme-Endpoint**: `/overlay/theme.css` – liefert CSS-Tokens als Stylesheet - **Widgets laden Theme automatisch**: Jedes Widget lädt zuerst das Theme-CSS, dann eigenes CSS - **Hot-Reload**: Theme-Änderungen werden per WebSocket an alle aktiven Overlay-Fenster gesendet - **Server-Side Rendering**: Theme-Tokens werden in HTML als `<style>`-Block eingefügt - **Fallback**: Wenn Theme nicht geladen werden kann → Default-Theme (Dark Core) ### 6. Technische Umsetzung - CSS Custom Properties (Variablen) – native Browser-Unterstützung, kein CSS-Präprozessor nötig - Theme-Konfiguration in SQLite (`overlay_themes`-Tabelle) - Theme-Export als JSON mit allen Tokens + Metadaten (Name, Autor, Version) - JS `document.documentElement.style.setProperty()` für Hot-Reload - Kein CSS-Präprozessor im Build-Prozess nötig ## Technische Leitplanken - CSS-Custom-Properties (kein Sass/Less – minimale Abhängigkeiten) - Theme-Datei wird vom Overlay-Server generiert und gecached (etag-basiert) - Hot-Reload via WebSocket: Nur geänderte Tokens übertragen (Diff-basiert) - Theme-Speicher in SQLite (einfache Key-Value-Tabelle für Tokens) - Backup: Theme-Konfiguration als JSON exportierbar (für Sharing/Backup) - Kein externer Service: Alle Fonts werden entweder von Google Fonts CDN geladen oder lokal gespeichert ## Akzeptanz - [ ] 7+ vorgefertigte Themes sind auswählbar (Dark, Light, Neon, Minimal, Forest, Sunset, Ocean) - [ ] CSS-Token-System mit 20+ Tokens (Farben, Typografie, Abstände, Animation) - [ ] Theme-Editor mit Color Picker, Font-Selector und Slider - [ ] Widget-Override-Hierarchie (Global > Kategorie > Widget) funktioniert - [ ] Hot-Reload: Theme-Änderungen werden live an alle Overlays übertragen - [ ] Theme-Export/Import als JSON - [ ] Theme-Endpoint `/overlay/theme.css` liefert gültiges CSS - [ ] Alle Widgets (#39, #45, #93, #94, #95) nutzen das Theme-System ## Referenzen - StreamElements: SE_API key-value store for widget configs - Own3d: Scene Builder with design presets - Meld Studio: Built-in theme system

frank added this to the Overlays & Widgets milestone

2026-07-15 21:15:08 +02:00

frank self-assigned this

2026-07-15 21:15:08 +02:00

frank added the

priority:medium

effort:large

area:overlays

labels

2026-07-15 21:15:42 +02:00