switch between two themes (smoothly)

Die Idee war ein dunkles und eine helles Frontend-Design zu erstellen. Nicht jeder Benutzer mag jedoch eine dunkle Arbeitsoberfläche. Am einfachsten also zwei verschiedene Farbvarianten erstellen und dem Benutzer die Möglichkeit geben, zwischen beiden hin und her zu wechseln.

Als Beispiel habe ich einfache Formular Elemente von Bootstrap verwendet. Als erstes Theme verwende ich das Default von Bootswatch. Für die zweite/dunkle Variante habe ich die Farbe der Elemente, Schriften und Border angepasst.

Zum wechseln der Farbe ist nur die Klasse »black« im Body Tag notwendig. Diese wird per Knopfdruck mithilfe von jQuery getoggelt. Für die Animation verwende ich »transition« aus CSS3. Geschwindigkeit der Animation und die Farben sind alle im Stylesheet definiert.