Generator für helles und dunkles Thema (CSS-Variablen)
Wähle die Hauptfarbe. Der Generator baut die zwei Paletten, prüft den Kontrast jedes Paares und zeigt die Vorschau nebeneinander.
So geht’sDunkelmodus aus der Farbe der Marke
Verfügbar auf: 
Generator für helles und dunkles Thema (CSS-Variablen): wofür es gut ist
Ein gut gemachtes dunkles Thema ist nicht die Umkehrung des hellen. Aus der Hauptfarbe deiner Marke baut der Generator die CSS-Variablen beider Themen (Hintergrund, Fläche, Rand, Text, sekundärer Text, Hauptfarbe und der Text darauf) mit neutralen Grautönen oder zur Markenfarbe hin gezogenen.
Für jedes Farbpaar wird der Kontrast nach der Formel der WCAG berechnet und als AAA, AA oder unzureichend markiert, und die Hauptfarbe wird angepasst, um in beiden Themen über 4,5:1 zu kommen. Der Code wechselt das Thema über den Modus des Systems (prefers-color-scheme) und, wenn du möchtest, auch über einen Button mit data-theme.
So geht’s
- Wähle die Hauptfarbe.
- Prüfe die Vorschau und die Kontrasttabelle.
- Kopiere die CSS-Variablen.
Wann nutzen
- Den Dunkelmodus einer Website erstellen.
- Die Palette eines neuen Projekts zusammenstellen.
- Die Barrierefreiheit der Farben prüfen.
Häufige Fragen
Warum ist der Dunkelmodus nicht nur das Umkehren der Farben?
Umkehren macht den Hintergrund reinschwarz und die Markenfarben grell, was die Augen ermüdet. Ein gutes dunkles Thema nutzt einen sehr dunkelgrauen Hintergrund, fast weißen Text und eine hellere Version der Hauptfarbe, um den Kontrast zu halten, ohne zu blenden.
Was bedeuten AA und AAA beim Kontrast?
Es sind Stufen der Richtlinien für Barrierefreiheit WCAG. AA verlangt einen Kontrast von mindestens 4,5:1 für normalen Text; AAA 7:1. Der Generator zeigt das Verhältnis jedes Farbpaares und warnt, wenn eines unter 4,5:1 liegt.
Wie wechsle ich das Thema per Button?
Der Code reagiert auf den Modus des Systems (prefers-color-scheme) und auch auf das Attribut data-theme im html. Ein Button, der data-theme="dark" oder "light" setzt, erzwingt das gewählte Thema; das Tool Dunkelmodus-Button dieser Website erzeugt diesen Button.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.