Dark Mode - Einstellung im Betriebssystem des Nutzers

[Matthias Scharwies]

Servus!

Herzlich willkommen bei SELFHTML!

Hallo,

Wer kann mir bei einer Toggle Erstellung helfen? ( bin ein kompletter Newbie in diesen Dingen)

Würde gerne einen Toggle mit Text haben wo man zwischen einen hellen und dunklen Hintergrund wählen kann.

Hier der HTML Code:

Dein Ansatz ist falsch. Das HTML-Markup bleibt gleich - es wird nur eine Klasse getoggelt.

Noch besser wäre es, das dem Nutzer zu überlassen (der es schon im OS eingestellt hat) und im CSS folgende Einstellung zu setzen:

@media (prefers-color-scheme: dark) {
  /* Dark theme styles go here */
}


@media (prefers-color-scheme: light) {
  /* Light theme styles go here */
}

Das könnte man mit JS dann auch noch abfragen / bzw. mit einem Toggle-Button aktivieren.

Siehe: css-tricks: A Complete Guide to Dark Mode on the Web

[[EDIT]] Ich hab's im SELF-Wiki mal eingefügt:

• CSS/Media_Queries/Medienmerkmale#prefers-color-scheme

Eigentlich sollte es dazu auch ein Live-Beispiel und eine ausführlichere Erklärung geben. Direkt im Absatz oder als eigenes Kapitel?

[[/EDIT]]

Herzliche Grüße

Matthias Scharwies