Sowas geht mit CSS & JS ??? Der beste Color Theme Switch! [DE/Tutorial]

Du brauchst einen Hoster?

Ist das der beste Color Theme Switch? Heute bauen wir das zumindest mit HTML, CSS und JavaScript. In diesem Web Design & Development Tutorial kann also jeder am Ende einen echt coolen Button mit nach Hause nehmen und in sein nächstes Projekt einbauen.

Fragen oder Probleme? Werde Teil der Community! (Kostenlos)

Unterstütze den Channel:

Kapitel:
00:00 Demo
00:40 Setup
01:21 Basic Theme
03:39 Basic Button
04:57 Default Theme
06:37 Color Switch
14:50 CSS Style
20:19 Theorie
21:25 Animation
24:34 Icons
25:51 Fix Problem

Links aus dem Video:

#tutorial #webdesign #webdevelopment

Meine Social Media Seiten:

Copyright by Johannes Schiel / Unleashed Design

[devKazuto]

Super Video, würde nur statt `querySelector('.active')` lieber auf dem jeweiligen div ein `aria-current="theme"` oder `data-current="theme"`, wobei ersteres Screenreadern hilfreicher ist, und dann nutzen. Auch wenn es nur eine Demo ist, sollte man so etwas mit einbringen, weil das unerfahrenen Devs viel hilfreicher ist als eine CSS-Klasse die `active` heißt und im gesamten Code mehrfach vorkommen kann.

[PicSta]

Saustark. Top Tutorial mal wieder. Weiter so!

[Lexi_]

Super, so was habe ich mal von 10 Jahren mir gebaut, habe aber komplett die css-.datei getauscht und musste die Seite deshalb neuladen. Das von Dir ist aber moderner und einfacher. Danke

[ratzch]

Tolles Video <3 find deinen Kanal echt mega! Erst vor kurzem ja drauf gestoßen. Kann ich denn die Sachen auch einfach in Wordpress integrieren mit einem fancy Theme wie Divi?

[mkaynaki]

Warum wird die Klasse active zuerst entfernt und dann über den Umweg der body Klasse geschaut, welche Klasse zuletzt active gewesen ist? Ist es nicht effektiver, die Elemente im color-switch-inner zu suchen (was ja sowieso passiert), diese Elemente dann nach der active Klasse abzufragen und wenn diese gefunden wurde zu entfernen und im nächsten Element hinzuzufügen? Dann muss das alte Theme nicht erst über die body Klasse ermittelt werden um dann diese Info mit den Elementen abzugleichen? - Ansonsten super Video und der Button-Effekt ist ziemlich cool.
😊

[philippmerk]

Danke fürs Video. Hab eine Frage: Welchen Vorteil bringt die Nutzung des data attributes anstelle von Klassen?

[sungo]

Boah Javascript ist für mich echt das schwerste überhaupt. Mach schon ewig php aber mit Js wurde ich nie warm.😢

[MattMiller-ej]

Hinweis: Laut W3C-Spezifikation sind einem BUTTON-Element keine DIV-Elemente erlaubt.