Schritt-für-Schritt-Anleitung zum Hell-/Dunkel-Modus auf Bear Blog

Ich habe kürzlich in meinem Bear-Blog einen Hell-/Dunkel-Modus-Schalter implementiert, indem ich die Medienfunktion „Preferes-Color-Schema“ in Kombination mit der Farbfunktion „light-dark()“ verwendet habe.

So habe ich es gemacht.

Schritt 1: Einrichten des CSS

CSS hat in den letzten Jahren einige coole neue Funktionen erhalten, darunter die Farbfunktion hell-dunkel(). Mit dieser Funktion können Sie für jedes Element zwei Farben festlegen – eine für den hellen Modus und eine für den dunklen Modus.

Wenn Sie beispielsweise möchten, dass Ihr Hintergrund im hellen Modus weiß und im dunklen Modus schwarz ist, richten Sie ihn wie folgt ein:

body {
  background-color: light-dark(#fff, #000);
}

Ich habe diesen Ansatz auf alle Elemente mit unterschiedlichen Farbanforderungen im Hell- und Dunkelmodus angewendet.

Schritt 2: HTML hinzufügen

Für die Themenumschaltung habe ich ein einzelnes Symbol anstelle eines Schalters, von Optionsfeldern oder eines Dropdown-Menüs verwendet. Die Seite wird geladen, wobei nur das Symbol zum Wechseln in den umgekehrten Modus sichtbar ist – da mein Standardthema dunkel ist, ist das Symbol für den dunklen Modus zunächst ausgeblendet und das Symbol zum Wechseln in den hellen Modus sichtbar.

Das onclick-Ereignis ruft eine switchMode()-Funktion auf, die das Umschalten zwischen hellen und dunklen Themen übernimmt (mehr dazu später). Hier ist das HTML-Setup:

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

Schritt 3: Erstellen des JavaScript

Das JavaScript übernimmt zwei Hauptaufgaben:

1. Umschalten zwischen hellem und dunklem Modus, wenn der Benutzer auf das Symbol klickt.
2. Speichern der Theme-Präferenz des Benutzers in localStorage, um sie bei zukünftigen Besuchen automatisch zu laden.

Das JavaScript ist in zwei Teile aufgeteilt: Code im

um das Thema beim Laden der Seite einzurichten und Code in der einzufügen. um Elemente zu aktualisieren, nachdem die Seite vollständig geladen ist.

Um Code zum

und

Gehen Sie auf Bear zu Einstellungen > Kopf- und Fußzeilenanweisungen.

JavaScript-Code

Dieser Code ruft das zuvor gespeicherte Design aus dem lokalen Speicher ab, sofern verfügbar. Andernfalls wird geprüft, ob der Browser oder das Betriebssystem des Benutzers ein helles oder dunkles Thema bevorzugt. Wenn diese Informationen nicht verfügbar sind, wird standardmäßig der Dunkelmodus aktiviert. Dann wendet es diesen Modus auf das :root-Element (d. h. das Basiselement) an:

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

JavaScript-Code

Dieser Code zeigt das richtige Symbol basierend auf der PreferredScheme-Variable an, die zuvor im

festgelegt wurde. Die Funktion switchMode() aktualisiert die Symbolanzeige, ändert das :root-Farbschema und speichert die neue Einstellung im lokalen Speicher:

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

Und das ist es – ein Hell-/Dunkel-Modus-Schalter für Ihren Bären-Blog!

Das obige ist der detaillierte Inhalt vonSchritt-für-Schritt-Anleitung zum Hell-/Dunkel-Modus auf Bear Blog. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!