Das <ribaunt-widget> verwendet Shadow DOM zur Stil-Kapselung, wodurch externe Stylesheets nicht versehentlich in das Innere des Widgets durchsickern können. Du kannst sein gesamtes Aussehen dennoch anpassen, indem du CSS Custom Properties (Variablen) am Host-Element ribaunt-widget setzt — Shadow DOM erbt diese von außen, sodass deine Überschreibungen sauber durchlaufen.
Schnellstart
Die folgenden vier Variablen reichen für ein minimales dunkles Theme aus:
ribaunt-widget {
--ribaunt-background: #1e1e1e;
--ribaunt-border-color: #444;
--ribaunt-color: #f0f0f0;
--ribaunt-spinner-color: #f0f0f0;
}
Referenz der CSS-Variablen
| Variable | Standard | Beschreibung |
|---|
--ribaunt-background | #fdfdfd | Hintergrund des Widget-Containers |
--ribaunt-border-color | #dddddd8f | Rahmenfarbe des Widgets |
--ribaunt-border-radius | 14px | Rahmenradius des Widgets |
--ribaunt-color | #212121 | Textfarbe |
--ribaunt-widget-width | 230px | Breite des Widgets |
--ribaunt-widget-height | 58px | Höhe des Widgets |
--ribaunt-widget-padding | 14px | Innenabstand des Widgets |
--ribaunt-gap | 15px | Abstand zwischen Checkbox und Text |
--ribaunt-checkbox-size | 25px | Breite und Höhe der Checkbox |
--ribaunt-checkbox-background | #fafafa91 | Hintergrundfarbe der Checkbox |
--ribaunt-checkbox-border | 1px solid #aaaaaad1 | Rahmen der Checkbox |
--ribaunt-checkbox-border-radius | 6px | Rahmenradius der Checkbox |
--ribaunt-checkbox-margin | 2px | Oberer/unterer Abstand der Checkbox |
--ribaunt-spinner-color | #000 | Farbe des aktiven Spinner-Segments |
--ribaunt-spinner-background-color | #eee | Farbe der inaktiven Spinner-Spur |
--ribaunt-spinner-thickness | 5px | Stärke des Spinner-Rings |
--ribaunt-checkmark | Eingebauter grüner Haken | URL des SVG für das Erfolgs-Häkchen |
--ribaunt-error-cross | Eingebautes rotes Warnsymbol | URL des SVG für das Fehler-Kreuz |
--ribaunt-logo-color | #666 | Farbe des Ribaunt-Logos |
--ribaunt-font | systemeigene Sans-Serif | Schriftfamilien-Stack |
Dunkelmodus
Ribaunt erzwingt keinen automatischen Dunkelmodus. Stattdessen bindest du ihn selbst ein — entweder über eine Media Query, die auf die Systempräferenz reagiert, oder über eine CSS-Klasse, die deine Anwendung steuert.
@media (prefers-color-scheme: dark) {
ribaunt-widget {
--ribaunt-background: #2d2d2d;
--ribaunt-border-color: #555;
--ribaunt-color: #ffffff;
--ribaunt-checkbox-background: #444;
--ribaunt-spinner-color: #ffffff;
--ribaunt-spinner-background-color: #333;
--ribaunt-logo-color: #cccccc;
}
}
Mit einer CSS-Klasse
Wenn deine App einen eigenen Dunkelmodus-Schalter hat, der einem übergeordneten Element eine Klasse hinzufügt (z. B. <html class="dark">), kannst du die Überschreibungen auf diese Klasse beschränken:
.dark ribaunt-widget {
--ribaunt-background: #111;
--ribaunt-color: #eee;
}
Benutzerdefinierte Abmessungen
Du kannst das Widget an dein Formularlayout anpassen, indem du die Abmessungs-Variablen überschreibst. Das folgende Beispiel erstellt eine .large-Variante:
ribaunt-widget.large {
--ribaunt-widget-width: 300px;
--ribaunt-widget-height: 72px;
--ribaunt-checkbox-size: 32px;
}
Standard-CSS-Eigenschaften wie margin, box-shadow und display funktionieren direkt am Host-Element ribaunt-widget, da es sich um ein Inline-Block-Custom-Element handelt. Du brauchst kein Wrapper-<div>, nur um Abstand oder Schatten anzuwenden.