Darkmode

[dutscher]

siehe hier https://github.com/dutscher/bbx/blob/master/src/comps/Features/DarkmodeButton.svelte

<script>(() => {
        if (localStorage.getItem('theme') === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
            //document.body.classList.add('is-dark')
        }
    })()</script>

[vincentkg]

Das ist theoretisch durch daisyui möglich und dort so in der Art bereits an Bord. Wenn man ein anderes Theme als den OS- bzw. Browserstandard möchte muss nur am html element das attribut data-theme auf "light" oder "dark" gesetzt werden.

Damit das funktioniert, müssen in den Komponenten gewisse Klassen (base-100 bis 300 für "grundflächen") bzw. Variablen verwendet werden, z.B. bg-base-100 oder var(--b1) - zumindest für Grau-Abstufungen (bei daisy standardmäßig drei ebenen base-100 bis 300). Man kann natürlich auch manuell stylen, das sollte kein Problem sein. Die Daisy Klassen die man nicht verwendet sind aufgrund des TreeShaking nicht an bord und die "base" styles (praktisch ein reset.css) habe ich deaktiviert, da ich diese oft schon als zu invasiv empfinde. So kann man daisy wunderbar parallel integrieren.

[vincentkg]

Ich habe einen ähnlichen ThemeSwitcher implementiert, der sich den Zustand des zuletzt gewählten Themes merkt und selbstständig anwendet. Optisch ist es als Dropdown umgesetzt und oben rechts im linken Pane platziert. Man kann verschiedene Styles für verschiedene Themes schreiben, z.B. durch Nutzung des Attribute-Selektors

[data-theme="light"] {
  // foo
}

Dadurch lässt sich das Theme beliebig an jeder Stelle im Dom überschreiben.