Dark-Mode-Button für Website
Wähle die Farben der beiden Themes. Der Code enthält die CSS-Variablen, das Skript gegen das Aufblitzen und den barrierefreien Button mit aria-pressed.
So geht’sHelles und dunkles Theme mit einem Button
1. No <head>, antes do CSS
2. CSS
3. Button und Skript im Seitenkörper
Verfügbar auf: 
Dark-Mode-Button für Website: wofür es gut ist
Der Dark Mode ist auf Smartphones zum Standard geworden, und viele erwarten, dass Websites folgen. Dieser Generator baut das helle und dunkle Theme mit CSS-Variablen und prefers-color-scheme, sodass die Website dem System von selbst folgt, plus einen Button, mit dem die Person nur auf deiner Website ein anderes Theme wählen kann.
Der Code kommt in drei Teilen: eine Zeile für den head, die die gespeicherte Wahl vor dem Erscheinen der Seite anwendet (ohne Blitz im falschen Theme), das CSS mit color-scheme, damit Felder und Scrollleisten mitziehen, und der Button mit aria-pressed und Sonnen- und Mond-Symbolen.
So geht’s
- Wähle die Farben des hellen und des dunklen Themes.
- Teste den Button in der Vorschau.
- Füge die Zeile in den head ein, das CSS und den Button an der richtigen Stelle.
Wann nutzen
- Blogs und Content-Websites.
- Systeme und Dashboards.
- Entwickler-Portfolio.
Häufige Fragen
Wie vermeide ich den Blitz des hellen Themes beim Laden?
Das Skript, das die gespeicherte Wahl liest, muss im head laufen, bevor die Seite erscheint. Der Code kommt getrennt in zwei Teilen: eine Zeile für den head und der Button für den Seitenkörper.
Was bewirkt color-scheme?
Es teilt dem Browser mit, ob die Seite hell oder dunkel ist, damit er auch Scrollleisten, Formularfelder und den Standardhintergrund anpasst. Ohne es hat der Dark Mode störende weiße Felder.
Brauche ich einen Button, wenn die Website schon dem System folgt?
Nicht zwingend: Allein mit prefers-color-scheme folgt die Website schon dem Theme des Handys oder Computers. Der Button ist nützlich für alle, die auf deiner Website ein anderes Theme als das System wollen.
Ist das wirklich kostenlos?
Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.