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: ~~~ CSS @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 ](https://css-tricks.com/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](https://wiki.selfhtml.org/wiki/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 -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

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: ~~~ CSS @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 ](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web) Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“

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 und im CSS folgende Einstellung zu setzen: ~~~ CSS @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 aktiveren. Siehe: css-tricks: [A Complete Guide to Dark Mode on the Web ](https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web) Herzliche Grüße Matthias Scharwies -- Einfach mal was von der [ToDo-Liste](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) auf die Was-Solls-Liste setzen.“