Erstellen Sie in wenigen Minuten einen Dunkelmodus-Schalter (der tatsächlich funktioniert)-CSS-Tutorial-php.cn

Build a Dark Mode Toggle in inutes (That Actually Works)

Haben Sie schon einmal Stunden damit verbracht, den Dunkelmodus umzuschalten, nur um ihn bei der Seitenaktualisierung blendend weiß zu blinken? Oder schlimmer noch, hat es die Systemeinstellungen Ihres Benutzers völlig ignoriert? Ja, ich auch. ?

Hier ist die Sache: Der Dunkelmodus ist nicht mehr nur ein trendiges Feature. Da immer mehr Menschen nachts programmieren (schuldig im Sinne der Anklage) und Zugänglichkeit immer wichtiger wird, ist ein gut implementierter Dunkelmodus praktisch ein Muss für moderne Websites oder Web-Apps. Aber es richtig zu machen, kann überraschend schwierig sein.

Die gute Nachricht? Nachdem ich verschiedene Implementierungen durchforstet und mit localStorage gekämpft habe, habe ich endlich den Code für einen Dark-Mode-Schalter geknackt, der:

Erinnert sich tatsächlich an die Präferenzen Ihres Benutzers
Flasht beim Neuladen nicht das falsche Design
Spielt gut mit Systemeinstellungen
Die Implementierung dauert buchstäblich 5 Minuten

In diesem Beitrag werde ich Sie durch die Erstellung eines Dunkelmodus-Schalters führen, den Sie tatsächlich verwenden möchten. Keine überkomplizierten Lösungen, keine unnötigen Abhängigkeiten – nur sauberer, funktionierender Code, den Sie sofort implementieren können.

Voraussetzungen (die Dinge, die Sie brauchen)

Lassen Sie uns zuerst den langweiligen Teil aus dem Weg räumen – aber ich verspreche, mich kurz zu fassen!

Wahrscheinlich haben Sie bereits alles, was Sie brauchen, aber nur um sicherzustellen, dass wir auf dem gleichen Stand sind:

Einfaches HTML (Sie wissen zum Beispiel, was eine ist)
Einige CSS-Kenntnisse (insbesondere CSS-Variablen – aber ich werde es im Laufe der Zeit erklären)
Vanilla-JavaScript (nichts Besonderes, versprochen)
Ihr Lieblingscode-Editor
Etwa 5 Minuten Ihrer Zeit (und vielleicht ein Kaffee ☕)

Was wir bauen

Bevor wir loslegen, hier ein kurzer Blick darauf, was am Ende auf uns zukommen wird. Keine ausgefallenen UI-Bibliotheken oder komplizierten Setups – nur ein einfacher, reibungsloser Schalter, der etwa so aussieht:

Machen Sie sich keine Sorgen darüber, dass es genau so aussieht – das Wichtigste ist, dass es einwandfrei funktioniert. Wir konzentrieren uns zunächst auf die Funktion, dann können Sie es so gestalten, wie Sie möchten.

Das Beste daran? Alles, was wir bauen werden, funktioniert mit:

Moderne Browser (ja, sogar Safari!)
Systemeinstellungen für den Dunkelmodus
Seite wird aktualisiert (kein weißer Bildschirm blinkt mehr)
Keine externen Abhängigkeiten

Bereit, sich die Hände schmutzig zu machen? Beginnen wir mit dem Fundament!

Gründung der Stiftung

Okay, machen wir uns die Hände schmutzig! Zuerst richten wir die Grundstruktur ein.

Der HTML-Code: Halten Sie es einfach

Wir beginnen mit etwas absolut einfachem HTML. Über diesen Teil müssen Sie nicht zu viel nachdenken:

<button>



<h3>
  
  
  The CSS
</h3>

<p>Here's where things get interesting. We'll use CSS variables (aka custom properties) to handle our color scheme. Drop this in your CSS file:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
  --background: #ffffff;
  --text-primary: #222222;
  --toggle-bg: #e4e4e7;
  --toggle-hover: #d4d4d8;
}


[data-theme="dark"] {
  --background: #121212;
  --text-primary: #ffffff;
  --toggle-bg: #3f3f46;
  --toggle-hover: #52525b;
}

body {
  background-color: var(--background);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle {
  border: none;
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: var(--toggle-bg);
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-self: flex-start;
  position: absolute;
  right: 20px;
}

.theme-toggle:hover {
  background-color: var(--toggle-hover);
}

.theme-toggle svg {
    transform-origin: center;
    transition: transform 0.3s ease;
}

.theme-toggle:active svg {
    transform: rotate(30deg);
}

h1 {
  display: flex;
}

.sun-icon {
  display: none;
  width: 24px;
  height: 24px;
}

.moon-icon {
  width: 24px;
  height: 24px;
}

[data-theme="dark"] .sun-icon {
  display: block;
}

[data-theme="dark"] .moon-icon {
  display: none;
}

Nach dem Login kopieren

Profi-Tipp: Ist Ihnen aufgefallen, dass wir Datenthemen anstelle von Klassen verwenden? Dadurch wird sehr deutlich, wozu das Attribut dient, und mögliche Konflikte bei der Klassenbenennung werden verhindert.

Für die Symbole können Sie entweder Ihre eigenen SVGs verwenden oder sich einige aus Ihrer bevorzugten Symbolbibliothek holen. Ich verwende gerne einfache, also habe ich Chatgpt gebeten, sich Folgendes auszudenken:

<!-- Replace the empty SVGs with these -->
<svg>



<p>At this point, your toggle should look pretty decent, but it won't actually do anything yet. Don't worry though - in the next section, we'll add the JavaScript that makes it all work!</p>

<p><strong>A quick heads-up:</strong> I've kept the styling minimal on purpose. Feel free to spice it up with your own creative touches. Want a sliding animation? Go for it! Prefer a different icon style? Make it yours!</p>

<p>Ready to make this thing actually work? Let's move on to the JavaScript implementation!</p>

<h2>
  
  
  The JavaScript Implementation (Where It All Comes Together!)
</h2>

<p>Alright, this is where we make our toggle actually, you know... toggle. But don't worry - we're keeping it clean and simple.<br>
</p>

<pre class="brush:php;toolbar:false">const themeToggle = document.querySelector('.theme-toggle');


function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');

  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

  document.documentElement.setAttribute('data-theme', newTheme);

  localStorage.setItem('theme', newTheme);
}

// Listen for clicks on our toggle
themeToggle.addEventListener('click', toggleTheme);


function initializeTheme() {
  const savedTheme = localStorage.getItem('theme');

  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    document.documentElement.setAttribute(
      'data-theme',
      prefersDark ? 'dark' : 'light'
    );

    localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
  }
}

// Run on page load
initializeTheme();

// Listen for system theme change

window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    // Only update if user hasn't manually set a preference
    if (!localStorage.getItem('theme')) {
      document.documentElement.setAttribute(
        'data-theme',
        e.matches ? 'dark' : 'light'
      );
    }
  });

Nach dem Login kopieren

Lassen Sie uns zusammenfassen, was hier passiert, denn tatsächlich sind einige ziemlich coole Dinge im Gange:

Wenn jemand auf den Schalter klickt, überprüfen wir das aktuelle Thema und wechseln zum anderen
Wir speichern ihre Auswahl im localStorage (damit sie zwischen dem Laden der Seite bestehen bleibt)
Wenn die Seite zum ersten Mal geladen wird, gehen wir wie folgt vor:
- Überprüfen Sie, ob sie eine gespeicherte Präferenz haben
- Wenn nicht, überprüfen wir ihr Systemthema
- Wenden Sie das passende Thema an
Als Bonus achten wir auf Änderungen des Systemdesigns (z. B. wenn jemand den Dunkelmodus auf seinem Betriebssystem aktiviert)

Das Aufblitzen eines falschen Themas verhindern

Hier ist ein häufiges Problem: Manchmal sehen Benutzer beim Laden der Seite ein Aufblitzen des falschen Themas. Super nervig, oder? Lassen Sie uns das beheben, indem wir dieses Skript im

hinzufügen. Ihres HTML:

<script>
  // Add this to your <head> before any style sheets
  (function() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.documentElement.setAttribute('data-theme', savedTheme);
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('data-theme', 'dark');
    }
  })();
</script>

Nach dem Login kopieren

Dies wird sofort ausgeführt, bevor etwas anderes geladen wird, wodurch das lästige Flashen verhindert wird.

Und... das ist es! Sie haben einen funktionierenden Dunkelmodus-Schalter:

Erinnert sich an Benutzereinstellungen
Respektiert die Systemeinstellungen
Flasht nicht das falsche Thema
Funktioniert reibungslos mit Übergängen

Möchten Sie es noch besser machen? Kommen wir zu einigen hilfreichen Tipps, die Ihnen dabei helfen werden, von „gut“ zu „großartig“ zu wechseln!

Besser machen (weil Details wichtig sind!)

Lassen Sie uns von „es funktioniert“ zu „es funktioniert wunderbar“ wechseln, mit einigen wichtigen, aber oft übersehenen Verbesserungen. Das sind die Details, die eine professionelle Implementierung von einem schnellen Hack unterscheiden.

1. Zugänglichkeit der Tastatur

Stellen wir zunächst sicher, dass jeder unseren Schalter nutzen kann, unabhängig davon, wie er mit seinem Gerät interagiert:

// Add this to your existing JavaScript
themeToggle.addEventListener('keydown', (e) => {
    // Toggle on Enter or Space
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleTheme();
    }
});

Nach dem Login kopieren

2. Übergang deaktivieren

Übergänge deaktivieren, wenn der Benutzer reduzierte Bewegung bevorzugt:

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}

Nach dem Login kopieren

3. Umgang mit Inhaltsänderungen

Das ist etwas, was viele Entwickler übersehen: Einige Inhalte müssen je nach Thema möglicherweise geändert werden. Denken Sie an Bilder mit unterschiedlichen Versionen für Hell-/Dunkel-Modi:

// Add this to your toggleTheme function
function updateThemeSpecificContent(theme) {
    // Find all theme-aware images
    const themeImages = document.querySelectorAll('[data-theme-image]');

    themeImages.forEach(img => {
        const lightSrc = img.getAttribute('data-light-src');
        const darkSrc = img.getAttribute('data-dark-src');

        img.src = theme === 'dark' ? darkSrc : lightSrc;
    });
}

Nach dem Login kopieren

Verwenden Sie es in Ihrem HTML wie folgt:

<img data-theme-image data-light-src="/path/to/light-logo.png" data-dark-src="/path/to/dark-logo.png" alt="Erstellen Sie in wenigen Minuten einen Dunkelmodus-Schalter (der tatsächlich funktioniert)">

Nach dem Login kopieren

4. Verhindern von Themenkonflikten

Manchmal kann es vorkommen, dass das gespeicherte Thema nicht mehr mit dem übereinstimmt, was tatsächlich angezeigt wird. Fügen wir eine Sicherheitsüberprüfung hinzu:

<button>



<h3>
  
  
  The CSS
</h3>

<p>Here's where things get interesting. We'll use CSS variables (aka custom properties) to handle our color scheme. Drop this in your CSS file:<br>
</p>

<pre class="brush:php;toolbar:false">:root {
  --background: #ffffff;
  --text-primary: #222222;
  --toggle-bg: #e4e4e7;
  --toggle-hover: #d4d4d8;
}


[data-theme="dark"] {
  --background: #121212;
  --text-primary: #ffffff;
  --toggle-bg: #3f3f46;
  --toggle-hover: #52525b;
}

body {
  background-color: var(--background);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle {
  border: none;
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: var(--toggle-bg);
  cursor: pointer;
  transition: background-color 0.2s ease;
  align-self: flex-start;
  position: absolute;
  right: 20px;
}

.theme-toggle:hover {
  background-color: var(--toggle-hover);
}

.theme-toggle svg {
    transform-origin: center;
    transition: transform 0.3s ease;
}

.theme-toggle:active svg {
    transform: rotate(30deg);
}

h1 {
  display: flex;
}

.sun-icon {
  display: none;
  width: 24px;
  height: 24px;
}

.moon-icon {
  width: 24px;
  height: 24px;
}

[data-theme="dark"] .sun-icon {
  display: block;
}

[data-theme="dark"] .moon-icon {
  display: none;
}

Nach dem Login kopieren

5. Trick zur Leistungsoptimierung

Hier ist ein netter Trick, um Layoutverschiebungen beim Laden benutzerdefinierter Schriftarten in verschiedenen Designs zu verhindern:

<!-- Replace the empty SVGs with these -->
<svg>



<p>At this point, your toggle should look pretty decent, but it won't actually do anything yet. Don't worry though - in the next section, we'll add the JavaScript that makes it all work!</p>

<p><strong>A quick heads-up:</strong> I've kept the styling minimal on purpose. Feel free to spice it up with your own creative touches. Want a sliding animation? Go for it! Prefer a different icon style? Make it yours!</p>

<p>Ready to make this thing actually work? Let's move on to the JavaScript implementation!</p>

<h2>
  
  
  The JavaScript Implementation (Where It All Comes Together!)
</h2>

<p>Alright, this is where we make our toggle actually, you know... toggle. But don't worry - we're keeping it clean and simple.<br>
</p>

<pre class="brush:php;toolbar:false">const themeToggle = document.querySelector('.theme-toggle');


function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme');

  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

  document.documentElement.setAttribute('data-theme', newTheme);

  localStorage.setItem('theme', newTheme);
}

// Listen for clicks on our toggle
themeToggle.addEventListener('click', toggleTheme);


function initializeTheme() {
  const savedTheme = localStorage.getItem('theme');

  if (savedTheme) {
    document.documentElement.setAttribute('data-theme', savedTheme);
  } else {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    document.documentElement.setAttribute(
      'data-theme',
      prefersDark ? 'dark' : 'light'
    );

    localStorage.setItem('theme', prefersDark ? 'dark' : 'light');
  }
}

// Run on page load
initializeTheme();

// Listen for system theme change

window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', (e) => {
    // Only update if user hasn't manually set a preference
    if (!localStorage.getItem('theme')) {
      document.documentElement.setAttribute(
        'data-theme',
        e.matches ? 'dark' : 'light'
      );
    }
  });

Nach dem Login kopieren

Checkliste für Schnelltests

Bevor Sie versenden, testen Sie unbedingt diese Szenarien:

✅ Bei der Seitenaktualisierung bleibt das richtige Thema erhalten
✅ Änderungen des Systemdesigns werden berücksichtigt (sofern keine manuelle Präferenz vorliegt)
✅ Das Umschalten funktioniert sowohl mit der Maus als auch mit der Tastatur
✅ Kein Blinken des falschen Themes beim Laden
✅ Übergänge sind fließend
✅ Funktioniert in allen gängigen Browsern (ja, sogar Safari!)
✅ Themenspezifische Inhaltsaktualisierungen korrekt

Häufige Probleme, auf die Sie achten sollten

Inhalte Dritter: Einige eingebettete Inhalte respektieren möglicherweise nicht Ihr Thema. Behandeln Sie es so:

<script>
  // Add this to your <head> before any style sheets
  (function() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      document.documentElement.setAttribute('data-theme', savedTheme);
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.setAttribute('data-theme', 'dark');
    }
  })();
</script>

Nach dem Login kopieren

Bilder mit Transparenz: Sie können auf verschiedenen Hintergründen falsch aussehen:

// Add this to your existing JavaScript
themeToggle.addEventListener('keydown', (e) => {
    // Toggle on Enter or Space
    if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        toggleTheme();
    }
});

Nach dem Login kopieren

Das ist es! Sie verfügen jetzt über eine robuste, zugängliche und benutzerfreundliche Dark-Mode-Implementierung, die verschiedene Szenarien wie ein Champion bewältigt.

Abschluss

Nun, da haben Sie es! Wir haben einen Dunkelmodus-Schalter entwickelt, der nicht nur funktioniert, sondern wirklich gut funktioniert.

Lassen Sie uns kurz zusammenfassen, was wir erreicht haben:

Ein Schalter, der sich tatsächlich an die Vorlieben Ihrer Benutzer erinnert?
Sanfte Übergänge zwischen Themen ohne den gefürchteten Blitz ⚡
Systempräferenzerkennung, die einfach funktioniert?
Barrierefreiheit von Anfang an integriert ♿
Leistungsoptimierungen, damit alles schnell läuft ?‍♂️

Wohin geht es von hier aus?

Nehmen Sie diesen Code gerne und machen Sie ihn zu Ihrem eigenen. Fügen Sie vielleicht ein paar ausgefallene Animationen hinzu, probieren Sie verschiedene Farbschemata aus oder integrieren Sie es in Ihr bestehendes Design. Das von uns geschaffene Fundament ist solide genug, um alle kreativen Ideen zu bewältigen, die Sie ihm entgegenbringen.

Eine letzte Sache...

Der Dunkelmodus mag wie ein kleines Detail erscheinen, aber es sind diese kleinen Details, die zeigen, dass Ihnen das Benutzererlebnis am Herzen liegt. Außerdem ist es einfach cool. Wer liebt nicht einen guten dunklen Modus?

Wenn Sie dies hilfreich fanden, können Sie es gerne mit anderen Entwicklern teilen. Und wenn Ihnen coole Verbesserungen einfallen, würde ich mich freuen, davon zu hören!

Bleiben wir in Verbindung! ?

Wenn Ihnen dieser Leitfaden gefallen hat und Sie mehr Web-Entwickler-Tipps, Hacks und gelegentliche Papa-Witze zum Thema Programmieren wünschen, kommen Sie mit mir auf X! Ich teile schnelle Tipps, Einblicke in die Programmierung und praktische Lösungen aus meiner Entwicklerreise.

? Folge mir @Peboydcoder

Ich poste regelmäßig über:

Tipps und Tricks zur Webentwicklung
Best Practices für das Frontend
UI/UX-Einblicke
Und ja, weitere Beiträge zur Wertschätzung des dunklen Modus?

Kommen Sie vorbei und sagen Sie Hallo! Ich freue mich immer, mit anderen Entwicklern in Kontakt zu treten, denen die Schaffung besserer Web-Erlebnisse am Herzen liegt.

Das obige ist der detaillierte Inhalt vonErstellen Sie in wenigen Minuten einen Dunkelmodus-Schalter (der tatsächlich funktioniert). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!