Templateabfrage Darkmode

  • Moin,

    ich habe im Template pageHeader.tpl ein Logo eingebunden und stehe nun vor der Herausforderung, für die dunkle Variante des Stils ein anderes Logo einzubinden. Existiert eine Templateabfrage, die prüft, ob die helle oder dunkle Variante des Stils genutzt wird?

  • Code
    {if $__wcf->user->getUserOption('colorScheme') == 'light'}<img src="..." alt="" />
    {elseif $__wcf->user->getUserOption('colorScheme') == 'dark'}<img src="..." alt="" />
    {elseif $__wcf->user->getUserOption('colorScheme') == 'system'}<img src="..." alt="" />
    {else}<img src="..." alt="" />
    {/if}

    Und wie sage ich der Website das es sich bei System das entsprechende Bild ziehen muss? So funktioniert es jedenfalls nur mit light und dark.

  • Ich habe es auf Basis von Softcreatr's Abfrage so gelöst:

    System habe ich augenscheinlich nicht berücksichtigt, konnte diesbezüglich aber auch kein Fehlverhalten feststellen.

  • Danke, ich schaue mal.

    System habe ich augenscheinlich nicht berücksichtigt, konnte diesbezüglich aber auch kein Fehlverhalten feststellen.

    Stell deinen Benutzer auf System, dein Betriebssystem auf dunkel und meld dich an, dann müsstest Du es reproduzieren können.

    Edited once, last by itsmeJAY (April 24, 2024 at 3:31 PM).

  • Stimmt, ist reproduzierbar. Gut, dann wirds erstmal schwieriger, als ich gedacht habe und auch die Alternativlösung mittels <picture><source srcset="..." media="(prefers-color-scheme: ...)">...</picture> fällt auch durchs Raster.

  • Hallo,

    ich weiß auch noch nicht genau, wie man System abfragen sollte. Die Selektoren

    CSS
        html[data-color-scheme="light"] {
    	}
    	html[data-color-scheme="dark"] {
    	}

    sind nicht sinnvoll zu nutzen, da data-color-scheme eben auch system sein kann.

    Ich habe die if-Bedingung noch etwas geändert, damit Gäste ebenfalls das "light"-Logo angezeigt bekommen. In deinem Code kriegen die Gäste nämlich das Dark-Mode-Logo angezeigt, da diese kein colorScheme gesetzt haben und somit in den {else}-Block fallen.

    {if $__wcf->user->getUserOption('colorScheme') != 'dark'}

    Edited once, last by itsmeJAY (April 24, 2024 at 3:57 PM).

  • Wo genau soll "system" denn stehen? Im html-Tag?

    Habs jetzt mal mit Chrome und Firefox getestet:

    Quote

    Stell deinen Benutzer auf System, dein Betriebssystem auf dunkel und meld dich an, dann müsstest Du es reproduzieren können.

    Und sehe nirgends ein "system". Ich habe "Automatisch erkennen" aktiv" und je nach Einstellung wechselt der Tag auf "light" oder "dark" aber nie auf "system" 🤔

    • New
    • Official Post

    system ist ein dynamischer Wert. Wenn dieser als Wert im Quelltext steht, wird die automatische Erkennung aktiv und der Wert aktualisiert sich dynamisch auf Basis eines Media Query. Im Prinzip das, was im CSS auch passiert, der Wert system existiert zur Laufzeit nicht.

    • New
    • Official Post

    bei mir schon.

    Im Quelltext ja, aber eben nicht zur Laufzeit, genau das schrieb ich doch.

    Dann ist "system" im Tag ein Fehler?

    Ja und könnte auf veraltete oder fehlerhafte Templates hindeuten. Der Wert system ist ungültig und dient einzig und allein dazu, dass die automatische Erkennung aktiv wird.

Participate now!

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