Light/Dark-Inspector
Jede Component nebeneinander in beiden Modi. Sieh sofort, wo Farben nicht mitziehen, Kontraste kippen oder Schatten verschwinden.
Hero
Component-Doku → Light
Dark
Card-Grid
Component-Doku →Quote
Component-Doku → Light
Endlich ein Energieversorger, der ehrlich kommuniziert und fair abrechnet.
Maria SchneiderKundin seit 2018
Dark
Endlich ein Energieversorger, der ehrlich kommuniziert und fair abrechnet.
Maria SchneiderKundin seit 2018
Accordion (FAQ)
Component-Doku → Light
Wie wechsle ich?
Online den Tarif wählen — wir kümmern uns um den Rest.
Was kostet der Tarif?
Ab 32,5 Cent/kWh.
Dark
Wie wechsle ich?
Online den Tarif wählen — wir kümmern uns um den Rest.
Was kostet der Tarif?
Ab 32,5 Cent/kWh.
Buttons & Tags
Component-Doku → Light
Dark
Form-Inputs
Component-Doku → Light
Pflichtfeld
Dark
Pflichtfeld
Worauf achten
- Kontraste prüfen: Headlines und Fließtext sollten in beiden Modi WCAG-AA erreichen (4.5:1 für Standard-Text, 3:1 für großen Text).
- Schatten verschwinden: Schatten auf Cards/Boxen sind im Dark-Mode weniger sichtbar — Border statt Schatten als Backup.
- Branding-Farben: Primary/Secondary/Success-Hue muss in beiden Modi gleich erkennbar sein. Lightness ggf. anpassen via oklch.
- Hover-States: Im Light-Mode oft dunklere Farbe, im Dark-Mode oft hellere. CSS via oklch(from … l +5% c h) statt fester Werte.
- Bilder: Pure-PNG-Logos können im Dark-Mode "schweben" — Transparenz prüfen, ggf. dark-Variante.