Themes

Farb-Presets und Custom-Paletten für die GTS-Web-UI. Pro User in der Datenbank gespeichert — folgt dir beim Login auf anderen Geräten oder im Inkognito-Tab.

Wie du's änderst

Sidebar → Einstellungen → Theme.

  • Preset wählen: Kuble Default · Light · Nord · Deep Violet · Ocean
  • Custom Palette: 7 Farb-Picker (Background, Primary, 5 Kategorie-Farben), optional Ink-Farbe (sonst auto-contrast vom Background)

Änderungen sind sofort live, kein Reload nötig.

Wo's gespeichert wird

Zwei Orte:

  1. Cookie (gts-theme) — damit der Server das Theme schon beim Render-Pass ins <html>-Tag schreibt und kein Flash beim Laden passiert.
  2. DB (admins.theme_cookie) — pro User. Beim Login wird der Cookie aus der DB wiederhergestellt.

Das heisst:

  • Inkognito-Browser → Login → dein Theme kommt mit.
  • Neues Gerät → Login → dein Theme kommt mit.
  • Logout + Login als anderer User → dessen Theme wird geladen.

Wichtig: Das Theme wird erst ab dem ersten Speichern nach Deploy persistiert. Wenn dein Theme noch nicht "folgt", einmal in /settings/theme speichern — dann ist's in der DB.

Custom Theme — Tipps

  • Background ist die wichtigste Farbe. Sie bestimmt automatisch ob der Rest der UI dark- oder light-getönt wird (perzeptive Luminanz).
  • Ink (Textfarbe) meist leer lassen — auto-contrast liefert #f4f7fc auf dunklen Backgrounds, #0a1530 auf hellen.
  • Swatches in den Pickern sind Vorschläge — du kannst jeden Hex-Wert eintippen.
  • Reset unten setzt dich zurück auf Kuble Default und löscht den Custom-JSON aus der DB.

Unter der Haube

Presets sind Klassen auf <html>:

  • .theme-light
  • .theme-nord
  • .theme-violet
  • .theme-ocean

.theme-light ist speziell — das Basis-Design ist dark-first, Light muss fast jede Variable umkehren. Die anderen drei überschreiben nur ein paar Akzent-Farben.

Custom-Themes erzeugen keine Klasse, sondern inline <html style> mit allen --*-Variablen. Sieht hässlicher aus im DevTools, funktioniert aber ohne dass der Server jedes Mal neue CSS-Dateien ausspucken muss.

Schema der Custom-Theme-JSON:

{
  "bg": "#1a0f2e",
  "primary": "#9b7dff",
  "slow": "#7dafff",
  "rapid": "#ff99b4",
  "sync": "#7dffde",
  "priv": "#b678ff",
  "biz": "#4a7ce0",
  "ink": "#f4f7fc",
  "inbox": "#9b7dff"
}

Alle Felder ausser ink + inbox sind Pflicht. Hex 6-Stellen.