😱 Einfacher DARK-MODE Switch mit CSS & JS 👍 [TUTORIAL]

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

Unterstütze den Channel:

Links aus dem Video:

Meine Social Media Seiten:

Wenn ihr euch für meine Ausrüstung, Software oder Bücher interessiert dann schaut einfach hier mal vorbei und unterstützt mich mit einem Kauf.

#Tutorial #WebEntwicklung #WebDesign

Copyright by Johannes Schiel / Unleashed Design

[Paister]

Simple und effektive Umsetzung. Schön kurz und knackig. Danke!

[nurarunenfuks]

Sehr nice! Super easy, wenig code <3 lässt mein Herz gleich höher schlagen!
Vielen Dank fürs zeigen und erklären!! :3 Ich liebe es, wenn man schnell zum Punkt kommt und die relevanten Infos nicht hinter eeeewigen Ausschweifungen erklärt werden! Weiter so!

[jantube]

Tolles Tutorial! :) Ich werde es auf jeden Fall anwenden! Dazu werde ich noch zwei verschiedene Icons als Button für das Umschalten einsetzen. Vielleicht finde ich sogar ein kostenloses SVG Icon, das ich beim Umschalten animieren kann.

[vanessamuller]

Danke für das super Tutorial! Werde ich auf jeden Fall mal ausprobieren :D

[paulrw]

sehr schön und einfach erklärt, bitte mehr davon! ;)

[Fabian-_-]

Naja, eine der beiden Klassen (light/dark) kann man ja weglassen. Ist auch besser so. Dann hat man immer ein Fallback/Default und braucht kein Javascript

[lampirealoaded]

Hey, ich habe das ganze etwas anders gecodet, aber es funktioniert auch. Kannst du vielleicht ein tutorial machen, wo du zeigst, wie man den Darkmode "speichern" kann, wenn man auf einen Link drückt? immer wenn ich auf mein Portfolio auf den <a drücke, geht halt immer der Lightmode wieder an

[slipi_]

Colles Video, jedoch müsste ich eine Session einbauen, damit zb class dark bei neu laden aktiv bleibt, oder gebe es eine andere lösung?

[feldmanovitch]

Kannst du davon mal ein Update machen? Ich denke es würde auch Sinn machen hier noch Instruktionen einzubauen wie man das gesetzte Theme ins Local Storage schreibt

[XxGabberlordxX]

Hey ich hätte mal eine Frage wie du verschiedene Farbvarianten testest.


Leider bin ich als Backend Entwickler unfähig Grafikdesignprogramme zu verwenden und mit der Frontendentwicklung setze ich mich erst seit kurzem auseinander.


Wie verwaltest und testest du verschiedene Farbprofile einer Webseite? Bspw. bin ich mir nicht sicher ob meine eigene Webseite ein Dark oder Light Theme erhalten soll.
Meistens kommentiere ich einfach dann einfach die Background-Color Komponente aus und ersetze sie durch eine andere. Dies führt leider häufig dazu, dass ich gerne mal 4 auskommentierte und 1 aktive Background CSS Property verwende.


Wie entwickelst du das Corporate Design einer Webseite?

[ultramoxx]

Wie lustig, genau das hab ich gestern auch gemacht :P

[SoCreaty]

Leider funktioniert die System-Erkennung vom Dark-Mode nicht.
if dark)').matches) {
da stimmt was nicht

[jantube]

Gibt es einen Trick, das bei bestehenden Websites, die ohne Variablen im CSS erstellt wurden einfach umzusetzen oder muss man dann im JS jedes Element separat mit = new style_ anpassen?

[supportic]

Habe mich schon gefragt wieso du CSS Variablen verwendest, obwohl du SASS nutzt und dort Variablen als $var deklariert werden. Stellt sich raus, dass CSS Variablen überall im Dokument ausgelesen und genutzt werden können und SASS Variablen nur vor dem Nutzen (idealerweise am Anfang des Dokuments) deklariert werden müssen. ^^

[xelth]

else => { (for i=1 to 10000) darkmode = false } Das wäre dann echt SICHER! 😁

[BennyAlex]

Classlist.toggle() hätte es auch getan

[nikalags]

Wie machst du das, dass du keine klammern usw. schreiben musst ?