Theme Switch ist eine fokussierte UI-Komponente für den Wechsel zwischen Light und Dark Mode. Ziel war ein sauber animierter Toggle, der nicht nur gut aussieht, sondern auch im Alltag stabil und verständlich funktioniert.
Der Schalter ist für Maus, Tastatur und Touch optimiert und berücksichtigt sowohl visuelle Qualität als auch Zugänglichkeit. Zusätzlich bleibt die Nutzerpräferenz über Seiten-Neuladen hinweg erhalten.
Die Komponente ist vollständig mit HTML, CSS und Vanilla JavaScript umgesetzt. Der Theme-Zustand wird in localStorage gespeichert und direkt beim Laden der Seite angewendet.
Dadurch wird ein sichtbares Flackern beim Initial-Render vermieden und die Oberfläche startet direkt im zuletzt gewählten Theme. Der Schalter nutzt ARIA-Attribute für eine klare, assistive Semantik.
Animationen und Übergänge sind so umgesetzt, dass sich die Interaktion wertig anfühlt und gleichzeitig mit prefers-reduced-motion respektvoll auf reduzierte Bewegungspräferenzen reagiert.
localStorage (Light/Dark)role="switch" und ARIA-State:focus-visibleprefers-reduced-motionclamp(...) für konsistente DarstellungBei Theme Switch habe ich gelernt, wie viel Qualität in scheinbar kleinen UI-Komponenten steckt: saubere Zustandsführung, frühe Initialisierung und zugängliche Interaktion entscheiden spürbar über das Nutzungserlebnis. Besonders wertvoll war für mich die Kombination aus visuellem Feinschliff und robuster, wartbarer Logik.