Dark Mode - Einstellung im Betriebssystem des Nutzers
bearbeitet von Matthias ScharwiesServus!
> 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.“
Dark Mode - Einstellung im Betriebssystem des Nutzers
bearbeitet von Matthias ScharwiesServus!
> 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.“