mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 23:01:09 +02:00

Till-JS 8e414c12ba feat(games): add worldream game to monorepo

- Integrate worldream (text-first world-building platform) into games/
- Configure as @worldream/web workspace package
- Remove standalone git repo, now part of monorepo

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-12-05 13:24:06 +01:00

4.7 KiB

Raw Permalink Blame History

Worldream Theme System

Überblick

Das neue zentrale Theme-System ermöglicht es, das gesamte Erscheinungsbild der Anwendung durch einfache Theme-Wechsel zu ändern. Alle Farben sind semantisch definiert und wirken sich automatisch auf alle Komponenten aus.

Verfügbare Themes

Jedes Theme hat sowohl eine helle als auch eine dunkle Variante:

1. Standard (Default)

Light: Helle, moderne Oberfläche mit Violet als Primärfarbe
Dark: Dunkles Theme mit Zinc-basierter Farbpalette
Das klassische Light/Dark-Duo als Standardauswahl

2. Wald (Forest)

Light: Helle, naturinspirierte Oberfläche mit grüner Farbpalette
Dark: Dunkles Wald-Theme mit tiefen Grüntönen
Beruhigend und fokussiert für naturverbundene Nutzer

3. Ozean (Ocean)

Light: Maritime helle Oberfläche mit Sky-Tönen
Dark: Dunkles Tiefsee-Theme mit intensiven Blautönen
Frisch und inspirierend für kreative Arbeit

Verwendung

Theme & Modus wechseln

Light/Dark Toggle: Klicke auf das Sonnen-/Mond-Symbol um zwischen heller und dunkler Variante zu wechseln
Theme Selection: Klicke auf das Theme-Symbol und wähle dein bevorzugtes Theme aus dem Dropdown-Menü
Die Kombination aus Theme und Modus wird automatisch gespeichert

Semantische Klassen

Hintergründe

bg-theme-base - Haupthintergrund der Seite
bg-theme-surface - Karten und Komponenten
bg-theme-elevated - Erhöhte/schwebende Elemente
bg-theme-overlay - Overlays und Modals

Text

text-theme-primary - Haupttext und Überschriften
text-theme-secondary - Sekundärer Text
text-theme-tertiary - Deaktivierter/subtiler Text
text-theme-inverse - Invertierter Text (z.B. auf dunklem Hintergrund)

Rahmen

border-theme-default - Standard-Rahmen
border-theme-subtle - Subtile Trennlinien
border-theme-strong - Betonte Rahmen

Primärfarben

bg-theme-primary-[50-950] - Primärfarben-Palette
text-theme-primary-[50-950] - Primärtext-Palette
border-theme-primary-[50-950] - Primärrahmen-Palette

Zustände

text-theme-success - Erfolgsmeldungen
text-theme-warning - Warnungen
text-theme-error - Fehlermeldungen
text-theme-info - Informationen

Interaktionen

hover:bg-theme-interactive-hover - Hover-Hintergrund
bg-theme-interactive-active - Aktiver Zustand
focus:ring-theme-interactive-focus - Fokus-Ring

Neues Theme hinzufügen

Öffne src/lib/themes/themes.config.ts
Füge ein neues Theme-Objekt zum themes Objekt hinzu:

myTheme: {
  name: 'My Theme',
  colors: {
    primary: {
      // Definiere die Primärfarben-Palette (50-950)
    },
    background: {
      // Definiere Hintergrundfarben
    },
    text: {
      // Definiere Textfarben
    },
    // ... weitere Farbdefinitionen
  }
}

Das neue Theme erscheint automatisch im Theme-Switcher!

Technische Details

Architektur

CSS-Variablen: Alle Farben werden als CSS Custom Properties definiert
Tailwind-Integration: Semantische Utility-Klassen über Tailwind Config
Runtime-Switching: Themes können ohne Neuladen gewechselt werden
LocalStorage: Theme-Auswahl wird gespeichert

Dateien

/src/lib/themes/themes.config.ts - Theme-Definitionen
/src/lib/themes/themes.css - CSS-Variablen
/src/lib/themes/themeStore.ts - State Management
/src/lib/components/ThemeSwitcher.svelte - UI-Komponente

Migration von alten Klassen

Alte Klassen wurden automatisch zu semantischen Klassen migriert:

Alt	Neu
`bg-slate-50 dark:bg-zinc-900`	`bg-theme-bg-base`
`text-slate-900 dark:text-zinc-100`	`text-theme-text-primary`
`border-slate-300 dark:border-zinc-700`	`border-theme-border-default`
`bg-violet-600 hover:bg-violet-700`	`bg-theme-primary-600 hover:bg-theme-primary-700`

Best Practices

Verwende immer semantische Klassen statt hard-coded Farben
Teste neue Features in allen Themes
Behalte Kontraste im Auge für Barrierefreiheit
Nutze die Primärpalette für Markenfarben
Verwende Zustands-Farben konsistent für Feedback

Vorteile

✅ Zentrale Verwaltung: Ein Ort für alle Farbdefinitionen
✅ Konsistenz: Automatische Anwendung auf alle Komponenten
✅ Flexibilität: Einfaches Hinzufügen neuer Themes
✅ Performance: Keine zusätzlichen Stylesheets nötig
✅ Entwickler-Erfahrung: IntelliSense und Type-Safety
✅ Benutzer-Erfahrung: Smooth Transitions zwischen Themes

4.7 KiB Raw Permalink Blame History