← Alle Themen · Theme

In diesem Artikel 8 Kapitel
  1. Wo
  2. Modus
  3. Sidebar-Position
  4. Farben
  5. Eigenes CSS (Power-User)
  6. Live-Vorschau
  7. Speichern + Anwenden
  8. Wirkungsbereich

Theme

Pro Benutzer einstellbares Erscheinungsbild, Modus (Dark/Light), Sidebar- Position (links oder oben) und Akzent-Farben.

Wo

Im Profil-Menü oben rechts (Klick auf den Namen) zwischen MFA und Abmelden den Eintrag Theme öffnen.

Modus

  • Dark (Default), dunkler Body-Hintergrund, dunkle Sidebar, helle Texte.

Entspricht der bisherigen Ansicht und ist der Standard nach dem Login.

  • Light, heller Body-Hintergrund. Die Sidebar bleibt dunkel, weil sie

als Navigationsleiste deutlich abgegrenzt sein soll.

  • Links (Standard), kompakte Sidebar links. Der heutige Look.
  • Oben, horizontale Navigation oben am Bildschirm; mehr Platz für

Inhalte unter der Header-Zeile.

Farben

Insgesamt 9 Farb-Variablen sind individuell anpassbar, Color-Picker oder direkte Hex-Eingabe (#RRGGBB). Pro Feld gibt's einen „Auf Default zurücksetzen"-Button.

VariableCSS-VariableWirkung
Primärfarbe--theme-deafultButtons, Links, aktive Sidebar-Einträge
Sekundärfarbe--theme-secondaryBadges, Hover-Highlights
Body-Hintergrund--app-body-bgHintergrund der ganzen Seite
Body-Textfarbe--app-body-textStandard-Textfarbe außerhalb von Karten
Karten-Hintergrund--app-card-bgCards, Modals, Dropdowns
Karten-Rahmen--app-card-borderRahmen von Cards + Modals
Tabellen-Rahmen--app-table-borderLinien zwischen Tabellenzeilen
Sidebar-Hintergrund--app-sidebar-bgLinke / obere Navigation
Header-Hintergrund--app-header-bgTop-Bar mit Logo + Notifications

Dark-/Light-Preset

Schnell-Buttons in der Modus-Karte:

  • Dark-Preset, alle Hintergrund-/Text-Variablen zurück auf die dunklen

Standardwerte. Brand-Akzente bleiben.

  • Light-Preset, Body hell, Karten weiß, Sidebar bleibt bewusst dunkel

(Navigation soll abgegrenzt sein). Brand-Akzente bleiben.

Brand-Schnell-Auswahl

7 vordefinierte Paletten (Scanalot Lila, Mint, Forest, Ocean, Sunset, Slate, Crimson), setzen nur Primär- und Sekundärfarbe.

Eigenes CSS (Power-User)

Wer noch tiefer eingreifen will, hat ein Textfeld bis 8.000 Zeichen das auf jeder Seite ins Inline-Style-Tag direkt nach den Theme-Variablen eingebaut wird. Damit kannst du:

  • Beliebige Selektoren überschreiben, !important kann nötig sein gegen

vorhandene Theme-Regeln

  • Mit den oben definierten --app-*-Variablen weiterarbeiten:

``css .meine-klasse { color: var(--theme-deafult); border-color: var(--app-card-border); } ``

  • Eigene Hover-Effekte, Animationen, Schriftarten setzen

Das Feld ist textuell, kein Live-Preview. Speichern + Reload nötig.

Hinweis: </style> und <style> werden serverseitig herausgefiltert, damit du das umliegende Style-Tag nicht versehentlich brichst.

Live-Vorschau

Beim Ändern von Farben wechselt die Vorschau-Karte rechts sofort die Anzeige. Die globalen CSS-Variablen werden direkt im DOM angepasst, damit Buttons + Hintergründe auf der Theme-Seite das neue Look-and-Feel zeigen.

Hinweis: Modus + Sidebar-Position werden erst beim nächsten Seitenwechsel (oder nach Klick auf „Speichern & anwenden", was die Seite neu lädt) wirksam, sie hängen am <body> bzw. #pageWrapper und brauchen einen Render.

Speichern + Anwenden

Klick auf Speichern & anwenden schreibt die Einstellungen pro Benutzer in die Datenbank und lädt die Seite neu. Beim nächsten Login werden sie automatisch geladen, auch in einer neuen Browser-Sitzung.

Auf Default setzt das Theme zurück auf Dark / Linke Sidebar / Scanalot-Lila.

Wirkungsbereich

Theme-Einstellungen gelten pro Benutzer und betreffen das gesamte Backend, Dashboard, Aufträge, Versand, Buchhaltung, alle Listen und Modale. Andere Benutzer sehen ihre eigenen Einstellungen.