Stil-Deklarationen für Dark/Light-Mode

  • Hi,

    Und genau an dieser Stelle scheitert es bei mir mit dem Schalter.


    Ich weiß nicht wie ich das anstellen soll.


    Die Basis funktioniert ja schonmal das es automatisch Hell und Dunkel wird ^^

    Fehlt jetzt nur der schalter. Vielleicht findet sich ja jemand der so was schnell einbaut?

  • Da wird man um JS nicht rumkommen.

  • Hab gestern auch ein light/darkmode Switch in unsere neue Seite eingebaut.

    Leider hab ich vergessen das man bei Woltlab nicht einfach die SCSS Variablen verwenden kann, musste es mit CSS Variablen machen.

    Das sollte man also so früh wie möglich machen.

    Ich darf jetzt erstmal die Variablen im Code ändern ^^

  • Hab gestern auch ein light/darkmode Switch in unsere neue Seite eingebaut.

    Leider hab ich vergessen das man bei Woltlab nicht einfach die SCSS Variablen verwenden kann, musste es mit CSS Variablen machen.

    Das sollte man also so früh wie möglich machen.

    Ich darf jetzt erstmal die Variablen im Code ändern ^^

    Du bist doch ein sehr erfahrener Designer, würdest du eventuell eine auf dem Standard basierenden Woltlab Stil Variante umsetzen?

    Sprich das es den Darkmode auto erkennt und eventuell den manuell Switch: https://wbbsupport.de/forum/th…dark-light-mode-switcher/ beinhaltet.


    Ich und sicher einige andere, wären dir dafür sehr sehr dankbar. Und ein Kaffee (Bier) ist ganz sicher drin :).


    LG

    Mit freundlichen Grüßen

    Sunny Cuewitzki

  • Erfahren is gut, ich stecke noch in den Kinderschuhen ;)

    Du hast doch selbst einen Link gepostet die am Ende auf eine codepen Seite verlinkt, das kannst du so übernehmen, man muss nur die Variablen für den darkmode und dem prefers-color-sheme kopieren.

  • Die Basis funktioniert ja schonmal das es automatisch Hell und Dunkel wird ^^

    Fehlt jetzt nur der schalter. Vielleicht findet sich ja jemand der so was schnell einbaut?

    Grundsätzlich ist es wohl das einfachste bei dieser Sache. Es gibt da aber schon eine Reihe an Lösungsvorschlägen. Gerade auf SoftCreatR seiner Seite zum Beispiel:


    https://support.softcreatr.com…283-stil-tag-nacht-modus/

    https://support.softcreatr.com/thread/3855-darkmode-switch/


    Ich selbst hatte da auch schon was fertig. Also zumindest den Schalter + erste CSS-Anweisungen. Leider kam ich noch nicht dazu, es weiterzuführen.

  • Hallo,


    Ich habe schon seit März 2020 ein funktionstüchtiges Design für einen darkmode switch gebastelt. Jedoch habe ich nie den vollständigen CSS-Code eingefügt, um alles auf Dark zu haben. Jetzt bin ich auf einen Punkt gekommen wo das Design so ungefähr "fertig" ist.


    Was ihr bei diesem Entwicklungsstand erwarten könnt, ist ein Switch im bottom bereich. Sollte der Darkmode paar Probleme beinhalten bitte ich auch den selber zu beseitigen.

  • das man bei Woltlab nicht einfach die SCSS Variablen verwenden kann, musste es mit CSS Variablen machen.

    Liegt an SASS und nicht an WoltLab. SCSS wird vom Server kompiliert. Sprich der Browser des Nutzers kennt die Variablen gar nicht. Er erhält eine vom Server erstellte CSS Datei.

  • Hallo,


    Ich habe schon seit März 2020 ein funktionstüchtiges Design für einen darkmode switch gebastelt. Jedoch habe ich nie den vollständigen CSS-Code eingefügt, um alles auf Dark zu haben. Jetzt bin ich auf einen Punkt gekommen wo das Design so ungefähr "fertig" ist.


    Was ihr bei diesem Entwicklungsstand erwarten könnt, ist ein Switch im bottom bereich. Sollte der Darkmode paar Probleme beinhalten bitte ich auch den selber zu beseitigen.

    Das sieht ja schonmal richtig gut aus, mit dem Button unten zum switchen. :)


    Schön wäre es, wenn es dennoch in kombination mit prefers-color-scheme funktionieren würde, aber das ist technisch nicht möglich oder ?


    Geht um den ersten Seitenaufbau wenn man z.B im Dunkel Modus ist, dass die Seite auch dunkel geladen wird anstatt erst auf den Switcher unten zu drücken.

  • Liegt an SASS und nicht an WoltLab. SCSS wird vom Server kompiliert. Sprich der Browser des Nutzers kennt die Variablen gar nicht. Er erhält eine vom Server erstellte CSS Datei.

    Na möglich sollte das schon sein wenn ich google frage, das habe ich wohl falsch ausgedrückt. Liegt natürlich nicht an Woltlab :D


    Das sieht ja schonmal richtig gut aus, mit dem Button unten zum switchen. :)


    Schön wäre es, wenn es dennoch in kombination mit prefers-color-scheme funktionieren würde, aber das ist technisch nicht möglich oder ?


    Geht um den ersten Seitenaufbau wenn man z.B im Dunkel Modus ist, dass die Seite auch dunkel geladen wird anstatt erst auf den Switcher unten zu drücken.

    Kopier die Farben die sich in der "darkmode" Klasse befinden in dein prefers-color-scheme block, dann sollte das funktionieren

  • möglich sollte das schon sein wenn ich google frage, das habe ich wohl falsch ausgedrückt. Liegt natürlich nicht an Woltlab :D

    Habe Mal die ersten drei geöffnet. Die ersten zwei arbeiten mit root, sprich CSS und nicht SCSS. Und der dritte beinhaltet keinen dynamischen Switch.


    SCSS ist serverseitig und kann dafür nicht genutzt werden.

  • Ja kein plan was in meinem Köpfchen geschwirt hat, hab nur gegoogelt aber auch nur den ersten Link überflogen.

    Hab bei mir VSC geschaut, hab 2 Versionen, bei der einen verwende ich CSS Variablen und beim anderen vergebe ich ne neue CSS Datei, da hatte ich SCSS verwendet, evtl hatte ich deswegen den Denkfehler.


    Wie dem auch sein, als erstes sind immer erst die anderen Schuld ^^

  • Darkmodes sind ja nun groß im Kommen

    Wobei ich deren derzeitige Beliebtheit nicht nachvollziehen kann!


    Solche Stile sehen zwar manchmal auf den ersten Blick cool aus, dafür leidet aber die Lesbarkeit von Texten erheblich und strengt die Augen sehr an.


    Ich bin u. a. Mitglied in einem Forum (Software: WoltlabSuite 5.3x), mit einem dunklen Stil, d. h. nahezu schwarzer Hintergrund mit weißer Schrift, was sehr ansprechend aussieht.


    Wenn ich aber diverse oder längere Beiträge lese, merke ich nach einiger Zeit, wie sehr sich meine Augen anstrengen müssen und empfinde es dann als eine Wohltat auf einen hellen Stil wie z. B. hier oder in meinem Forum zu wechseln.


    Zudem habe ich festgestellt, dass ich während der Dämmerung bei dunklen Stilen deutlich früher das Licht im Zimmer einschalten muss, als bei hellen Stilen.

    Gruß Markus


    WoltLab Suite 5.4.24

  • Hat vielleicht was damit zu tun, dass immer mehr Smartphones OLEDs haben und die halt bei weißem/hellem Hintergrund mehr Energie verbrauchen.

    Linux: Born to Frag 8) :D

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!