"Darkmode" als Gast umschaltbar

  • App
    WoltLab Suite Core

    Hallo,

    aktuell ist es nur im Benutzerkonto möglich, unabhängig von der Systemeinstellung, den Darkmode umzuschalten.

    Nur ich habe auch Webseiten im Einsatz, wo die Registrierung deaktiviert ist, da es für registriertte Benutzer einfach keine zusätzlichen Optionen gibt.

    Daher würde ich es mir wünschen, dass man auch außerhalb des Benutzerkontos den Darkmode umschalten kann.

  • Was passiert denn, wenn der Nutzer im Browser den Darkmodus eingestellt hat? Mit den Einstellungen im Kontrollbereich hat uns WL nach meinem Verständnis eh nur Luxus gegönnt. ;)

  • So habe ich das auf meiner Seite gelöst:

    1. im Template pageFooterCopyright an erster Stelle folgendes einfügen (EDIT: Du kannst das natürlich an jeder beliebigen Stelle einfügen):

    {include file='DarkModeSwitcher'}

    2. Erstelle das Template DarkModeSwitcher mit folgendem Inhalt:

    Danach sollte es dann so aussehen:

    EDIT 2: Ich habe jetzt den Button noch ein wenig an mein Design angepasst. Ist das von euch auch gewünscht, geht ihr wie folgt vor:

    Anpassung -> Stilunabhängiges CSS und SCSS

    und fügt dort folgendes ein:

    CSS
    /* Darkmodeswitcher */
    .changeColorSchemeButton {
    	color: #fff;
    	background-color: var(--wcfButtonPrimaryBackground);
    }
    
    .changeColorSchemeButton:hover {
    	color: #fff !important;
    	background-color: var(--wcfButtonPrimaryBackgroundActive) !important;
    }

    Das ganze passt sich dann an die Farben eurer primären Buttons im Stil an.

    Liebe Grüße

    Phil

    Edited 3 times, last by PhilvanGaat: SCSS/CSS Klassen hinzugefügt (March 4, 2024 at 6:36 PM).

  • Soweit funktioniert es für eingeloggte Problemlos. Als Gast habe ich oben in der mobilen Ansicht leider die falschen Farben (siehe Screenshot).

    Das erste Bild zeigt wie es eingeloggt aussieht und richtig wäre.

    Der schwarze Balken bleibt da oben, obwohl ich im CSS für Normal und Dark mit media Query

    .pageHeaderContainer {
    —wcfHeaderBackground: #969696;
    }

    gesetzt habe.

  • Lantis Versuche mal folgendes:

    Code
    .pageHeaderContainer {
     background-color: var(--wcfHeaderBackground);
     }

    Das sollte sowohl für den Darkmode als auch für den Lightmode die richtige Farbe wählen.

    Zur not überprüfst du in deinem Stil mal die Farben des jeweiligen Farbmodus. Dazu gehst Du wie folgt vor:

    Anpassung -> Stile -> Dein Stil auswählen -> Dunkles Farbschema bearbeiten (oben rechts)

    EDIT: Habe mir deine Seite mal angeschaut, sowohl die Desktop als auch die mobile Version. Soweit passt sich der HeaderContainer dem Farbmodus an. Das was du meinst ist auf dem iPhone im Safaribrowser oberhalb der Seite. Wie darauf einfluss genommen werden kann weiß ich leider nicht.

    Liebe Grüße

    Phil

  • Das was du meinst ist auf dem iPhone im Safaribrowser oberhalb der Seite. Wie darauf einfluss genommen werden kann weiß ich leider nicht.

    Schau mal, ob dir dieser Thread hilft Lantis

    bundesliganews
    December 25, 2023 at 10:23 AM
  • Danke euch. Für Gäste scheint die SCSS Anweisung keinerlei Auswirkungen zu haben.

    $wcfPageThemeColor: #000;

    Für eingeloggte funktioniert es komischerweise. Da ist es schwarz. Kann hier vielleicht ein Fehler seitens Woltlab vorliegen? Alexander Ebert

    Wie bekomme ich den eine SCSS Anweisung hin, die den Wert separat für den Hellen und Dunklen Modus einstellt?

  • PhilvanGaat

    Also ich habe den DarkModeSwitch für den Gast wieder entfernt. Jetzt wird alles mit hellen wie auch in dunklen Farben dargestellt wie es soll.

    Im ColorSchemeChanger scheint es einen Fehler zu geben. Vielleicht kannst du den Fehler dort beheben. Im Quellcode meiner Seite wird oben folgendes angezeigt wenn ich den Switch drin habe:

    HTML
    Beim ersten Laden der Seite:
    <html data-color-scheme="light">
    
    Umschalten auf dark:
    <html data-color-scheme="dark">
    
    Umschalten auf light:
    <html data-color-scheme="undefined">

    Irgendwas scheint da nicht zu funktionieren. Diesen Switch scheint es von Woltlab wohl deshalb nicht zu geben weil der wohl nur Probleme macht.:)

    Das würde zumindest erklären warum er beim hellen Modus oben die Farbe auf dunkel lässt.

  • PhilvanGaat

    Also ich habe den DarkModeSwitch für den Gast wieder entfernt. Jetzt wird alles mit hellen wie auch in dunklen Farben dargestellt wie es soll.

    Im ColorSchemeChanger scheint es einen Fehler zu geben. Vielleicht kannst du den Fehler dort beheben. Im Quellcode meiner Seite wird oben folgendes angezeigt wenn ich den Switch drin habe:

    HTML
    Beim ersten Laden der Seite:
    <html data-color-scheme="light">
    
    Umschalten auf dark:
    <html data-color-scheme="dark">
    
    Umschalten auf light:
    <html data-color-scheme="undefined">

    Irgendwas scheint da nicht zu funktionieren. Diesen Switch scheint es von Woltlab wohl deshalb nicht zu geben weil der wohl nur Probleme macht.:)

    Das würde zumindest erklären warum er beim hellen Modus oben die Farbe auf dunkel lässt.

    Also ich kann das so auf meiner Seite nicht reproduzieren. Bei mir steht im eingeloggten Zustand entweder system, light oder dark und als Gast steht dort immer system, passt sich jedoch trotzdem mit dem Button an und ist auch nach dem Neuladen als Gast weiterhin im Dark- und/oder Lightmode.

    Liebe Grüße

    Phil

  • Also ich kann das so auf meiner Seite nicht reproduzieren. Bei mir steht im eingeloggten Zustand entweder system, light oder dark und als Gast steht dort immer system, passt sich jedoch trotzdem mit dem Button an und ist auch nach dem Neuladen als Gast weiterhin im Dark- und/oder Lightmode.

    Danke. Komisch, bei mir wechselt er im Quelltext nur zwischen undefined und dark. Kannst du mir deine ColorSchemeChanger.js Datei hier als .txt zur Verfügung stellen?:) Das wäre ja das einzige was der Fehler sein könnte.

  • Kann man den Switcher auch im Header neben der Suche einbinden?

    Ja, du kannst den Button an die Stelle packen wo du ihn gerne hättest. Musst nur das entsprechende Template bearbeiten. Wie du das machst, weißt du hoffentlich. :)

    Kannst ihn dir dann aber auch persönlich bearbeiten per CSS etc.

    Liebe Grüße

    Phil

  • Ich habe mal den Standard-Stil geladen von Woltlab und dort ist genau das selbe Problem. Oben über dem Menü wo Uhrzeit und Netz steht unter iOS im Safari, ändert sich die Farbe nicht.

Participate now!

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