Dark-/Light-Modus Umschalter

Geht es bei Ihrer Frage um diese Themenkomponente, die einen Schalter zum Umschalten in den Dunkelmodus hinzufügt, oder um die Erkennung einer dunklen Farbpalette im Allgemeinen?

Es gibt dark-light-choose.

2 „Gefällt mir“

Vielen Dank für Ihre Hilfe.
Ich verwende diese Dark/Light Mode Toggle-Komponente

Meine Frage bezieht sich darauf, zu erkennen, in welchem Modus ich mich befinde und das Hintergrundbild zu wechseln, damit ich ein Bild für den Hellmodus und ein anderes für den Dunkelmodus haben kann.

Ich habe versucht, dem Link zu folgen, den Sie gepostet haben, und auch diesem hier

der etwas mehr ins Detail geht, aber ich war nicht erfolgreich. Ich habe versucht, Bilddateien (JPGs) $bg-light und $bg-dark zu meinem Theme hinzuzufügen


Ich habe auch versucht, ein Stylesheet color_definitions.scss zu meinem Theme mit dem Code aus diesem Beitrag hinzuzufügen

$bg: url(dark-light-choose($bg-light, $bg-dark));

:root {
  --custom-bg: #{$bg};
}

Ich habe auch versucht, ein Theme auf GitHub zu erstellen

Wie gesagt, entschuldigen Sie, dass ich etwas verloren bin.
Wenn ich ein neues Thema eröffnen soll, lassen Sie es mich wissen und in welcher Kategorie ich es einordnen soll.
Vielen Dank für Ihre Hilfe.

1 „Gefällt mir“

Moderatoren können die Beiträge bei Bedarf in ein neues Thema unter Dev verschieben. Ich wollte nur sicherstellen, dass Ihr Problem nicht direkt mit der Theme-Komponente zusammenhängt, sondern auch auftritt, wenn Sie den Dark Mode über die Browser- oder Geräteeinstellungen aktivieren.

Ich denke, Sie sind schon ziemlich nah dran. Eine Sache, die mir aufgefallen ist, ist, dass Sie url() zweimal verwenden:

1 „Gefällt mir“

Mein Problem hat definitiv nichts mit der Theme-Komponente zu tun
Danke für die Hilfe, entschuldige die Störung :blush:

Woah… sag das niemandem, das ist meine Geheimzutat, um zwei Hintergründe miteinander zu verschmelzen. Der erste hat Vorrang vor dem nächsten. Der erste ist also ein linearer Farbverlauf, bei dem die eine Hälfte transparent ist und die andere ein statisches Bild :wink: :sunglasses:

Hier ist der Effekt in Aktion

Ich habe verstanden, dass Sie 2 Hintergründe verwenden.

background-image: linear-gradient(to top, white, 15%, transparent), url(var(--custom-bg));

Aber ist url(var(--custom-bg)) in Kombination mit --custom-bg: #{$bg}; und $bg: url(dark-light-choose($bg-light, $bg-dark)); nicht so etwas wie url(url(dark-light-choose($bg-light, $bg-dark)))?

3 „Gefällt mir“

Wir bieten jetzt eine Umschaltmöglichkeit für den Dunkel-/Hellmodus im Kern an und haben daher diese Theme-Komponente ausgemustert. Weitere Details finden Sie in der Ankündigung:

5 „Gefällt mir“