Colors & Themes

15 Themes sind im Bundle eingebaut — von Light Blue über Dark Cherry Bloom bis Baker Street. Jedes Theme bringt seine eigenen CSS-Variablen für Akzent, Primary, Gradients.

Mehrere Themes erlaubt? Theme-Switcher erscheint im FE und merkt sich die Auswahl per localStorage. Nur ein Theme erlaubt? Switcher verschwindet, das Theme wird erzwungen — schöne Performance-Stellschraube für Kunden mit klarem CI.

Themes ootb

von Light Blue bis Baker Street

GL-Themes

mit WebGL-Aurora-Background

No-GL-Themes

Sparta / Sparta II / Baker Street

Verfügbare Themes

Probier sie aus — der Theme-Switcher liegt im Footer/Sidebar-Bottom (je nach Layout). Auswahl wird per localStorage gemerkt, kein Reload nötig. Im Backend kannst du via rct_allowed_themes einschränken welche Themes verfügbar sind — ist nur ein Theme erlaubt, wird der Switcher ausgeblendet und das Theme erzwungen.

Light Blue

Default-Theme — kühles Cyan + Königsblau, freundlich-tech.

Lime Tech

Frisches Lime-Grün auf dunklem Grund. Energetisch, modern.

Deep Purple

Tiefes Violett — kreativ, premium, ein bisschen mystisch.

Baccara Rose

Dunkle Rose — boudoir-vibey, romantisch-dramatisch.

Dark Cherry

Bordeaux + tiefdunkel — wein-elegant, fokussiert.

Honey Moon

Warme Honig-Töne — einladend, organisch, gold-akzentuiert.

Candy Chaos

Pink + Türkis Pop-Art — laut, jung, statement-machend.

Sparta

Erd-Rot + Bronze, kein WebGL — minimaler, performance-fokussiert.

Sparta II

Dunkler als Sparta — schwergewichtiger, militaristisch-kraftvoll.

Toxic Green

Neon-Grün auf Schwarz — terminal-cyber, hacker-aesthetic.

Claudy Sky

Soft Blau-Grau — sanft, atmosphärisch, beruhigend.

Glass Tank

Aquatisch Cyan-Türkis — frisch, klar, hydrodynamisch.

Neon Grid

80s Cyberpunk — Synthwave, Magenta + Cyan, retro-futuristisch.

Magnetic Field

Plasma-Violet + Pink — energetisch, magnetisch, dynamisch.

Baker Street

Sherlock Victorian — Lampen, Mond, Nebel. Kein WebGL, eigene Canvas-Effekte.

CSS-Variablen — die Theme-Logic

Jedes Theme bringt sein eigenes Set an CSS-Custom-Properties mit — auf :root[data-theme="<slug>"] definiert. Beim Theme-Wechsel wird nur das data-theme-Attribut auf <html> umgeschrieben, sämtliche Komponenten färben sich automatisch um.

:root[data-theme="default"] {
  --rct-accent:        #27c4f4;  /* Akzentfarbe */
  --rct-primary:       #2951c7;  /* Primary */
  --rct-primary-light: #27c4f4;  /* Primary hell */

  /* Gradient-Stops für Aurora-BG */
  --grad-1: #27c4f4;
  --grad-2: #2951c7;
  --grad-3: #1d2db2;
  --grad-4: #14054a;
}

Default-Theme im Backend anpassbar

Im RCT-Theme-Backend (Verzeichnis-Symbol → RCT-Konfiguration) lassen sich die Defaults für Akzent / Primary / Gradients per Color-Picker einstellen. Andere Themes überschreiben diese Defaults für ihre eigene Stilwelt.

Theme-Switcher im Frontend

FE-Modul

Eigenes FE-Modul rct_theme_switcher — als Dropdown im Sidebar-Footer oder Header platzierbar. User-Auswahl bleibt per localStorage erhalten, kein Server-Roundtrip.

Single-Theme erzwingen

Im Backend rct_allowed_themes auf nur ein Theme setzen — Switcher verschwindet im FE, das Theme wird erzwungen. Spart Code-Pfad und Mobile-Score.