Dunkelmodus ohne Flackern
Warum das Theme vor dem ersten Paint stehen muss, was ohne JavaScript passiert und wie ein generierter Spiegel das Problem löst.
Ein weißer Blitz beim Laden einer dunklen Seite ist das häufigste Symptom eines nachträglich gesetzten Themes. So haben wir ihn losbekommen.
Vor dem ersten Paint
Das Theme-Attribut wird von einem winzigen Inline-Script im <head> gesetzt – gespeicherte Wahl zuerst, sonst System-Präferenz. Der Browser hat zu diesem Zeitpunkt noch nichts gezeichnet.
Ohne JavaScript
Kein Script, kein Attribut. Damit die Seite trotzdem dunkel wird, spiegelt eine prefers-color-scheme-Regel alle Dark-Tokens – aber nur, solange kein Attribut gesetzt ist. Mit JavaScript gewinnt also die Wahl, ohne JavaScript das System.
Der Spiegel driftet
Handgeschriebene Spiegel veralten still, sobald die Foundation Tokens ergänzt. Deshalb wird unserer beim Build aus der installierten Foundation generiert und in der CI gegen sie geprüft.
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) { /* generiert */ }
}Die Browser-Chrome-Farbe
theme-color gibt es zweimal, mit media-Attribut pro Schema. Beim Umschalten setzt das Script beide auf den berechneten Hintergrund – ohne einen einzigen Hex-Wert im Code.