Dark Mode & Theme Toggle

Theme-Modus zentral gesteuert: Light, Dark oder Auto – sauber und konsistent umgesetzt.

So funktioniert der Theme-Wechsel

Atlas bringt einen Dark Mode mit, der nicht als „Sonderlayout“ gedacht ist, sondern als zentraler Modus der Seite. Das ist vor allem deshalb sinnvoll, weil sich Theme-Fragen nicht nur im CSS abspielen: Es geht auch darum, wann die Entscheidung getroffen wird, wie sie gespeichert wird und wie man verhindert, dass sich die Seite beim Laden sichtbar „umfärbt“.

Im Projekt ist die Logik so gelöst, dass es drei Zustände gibt: Light, Dark und Auto. Auto orientiert sich an den Systemeinstellungen des Geräts. Zusätzlich kann Atlas einen Theme Toggle anbieten, mit dem Besucher den Modus bewusst umstellen können. Die gewählte Einstellung wird gespeichert (localstorage), sodass die Seite sich beim nächsten Besuch wieder gleich verhält.

Entscheidend ist dabei weniger, dass ein Dark Mode vorhanden ist, sondern wie er umgesetzt ist: Er soll beim Laden ohne sichtbares „Umspringen“ starten, und die Zustände (Hell/Dunkel/Auto) müssen eindeutig geregelt sein. Wenn diese Grundlagen passen, bleibt die Darstellung ruhig und verlässlich – sowohl beim ersten Seitenaufruf als auch beim Wechsel zwischen den Modi.

Im Alltag hilft das außerdem bei Layout-Entscheidungen: Wenn Hintergründe, Fullwidth-Sektionen oder Hero-Overlays eingesetzt werden, spielt der Farbmodus automatisch mit. Man muss nicht für jede Seite wieder überlegen, ob einzelne Komponenten „in Dark überhaupt funktionieren“, weil das Theme-Konzept zentral gedacht ist.

Dark Light