Bereiten Sie den Dunkelmodus Ihrer Website in wenigen Minuten vor

Da über 80 % der Benutzer den Dunkelmodus in Apps wünschen, gab es noch nie einen besseren Zeitpunkt, ihn in Ihrer Webanwendung zu implementieren...

Aber keine Sorge – Sie müssen nicht viel tun, um Ihr CSS neu zu schreiben oder verschiedene harte Lernprozesse zu durchlaufen.

Ich werde Ihnen zeigen, wie Sie in knapp 15 Minuten (ja, wirklich) die Unterstützung des Dunkelmodus für Ihre Website integrieren können.

Am Ende dieses Tutorials sollten Sie über einen eleganten Dunkelmodus verfügen, der systembewusst ist und Ihre Benutzer beeindrucken kann.

Grundlegendes zum Dunkelmodus auf Systemebene

Das Beeindruckende an den Dark Modes der letzten Jahre ist, dass man keinen komplizierten Theme-Switcher von Grund auf erstellen muss.

Moderne Betriebssysteme kümmern sich bereits um die Bedürfnisse des Benutzers und Browser machen diese mit CSS einfach.

Die Magie geschieht hier durch eine Medienabfrage namens Prefers-Color-Schema. Es sieht so aus:

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

Wenn also ein Benutzer den gefürchteten Dunkelmodus-Schalter auf seinem System aktiviert, wird standardmäßig diese Medienabfrage aktiviert.

Dadurch kann der Stil Ihrer Website automatisch an die Vorlieben des Benutzers angepasst werden.

Das Gute ist, dass die meisten modernen Browser dies sofort unterstützen. Wir sprechen von Chrome, Firefox, Safari, Edge – sie sind alle an Bord...

Das bedeutet, dass Sie ohne zusätzliches JavaScript oder komplizierte Logik auf Einstellungen auf Systemebene zugreifen können.

Kommen wir zum spaßigen Teil – der tatsächlichen Implementierung in Ihren Code.

Die schnelle Implementierungsmethode

Lassen Sie uns gleich loslegen – als Erstes müssen Sie Ihre Farbvariablen in Ihrem CSS einrichten. So geht's:

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

Anstatt die Farben fest zu codieren, verwenden Sie jetzt diese Variablen. So:

body {
  background-color: var(--background);
  color: var(--text);
}

.card {
  background-color: var(--surface);
}

.button {
  background-color: var(--accent);
}

Das ist es im wahrsten Sinne des Wortes! Ihre Website wechselt nun automatisch zwischen Hell- und Dunkelmodus, basierend auf den Systemeinstellungen Ihres Benutzers. Kein JavaScript erforderlich, keine komplizierte Logik – sauberes und einfaches CSS.

Kurztipp: Beginnen Sie einfach mit den Grundfarben und passen Sie sie entsprechend Ihrer Marke an. Machen Sie sich am Anfang nicht zu viele Sorgen, Sie können später immer noch darauf zurückkommen und es optimieren.

Erweiterte Berührungen

Mit den oben genannten Codes sollte Ihre Website perfekt funktionieren, aber lassen Sie uns noch etwas Feinschliff hinzufügen, um Ihre Dark-Mode-Implementierung wirklich professionell zu machen.

Diese Anpassungen dauern nur ein paar Minuten, machen aber einen großen Unterschied:

Fügen Sie zunächst sanfte Übergänge hinzu, damit der Moduswechsel nicht stört:

:root {
  --background: #ffffff;
  --text: #333333;
  /* Add this line */
  transition: background-color 0.3s ease, color 0.3s ease;
}

Für Bilder, insbesondere Logos, fügen Sie diese Medienabfrage hinzu, um sie elegant zu verarbeiten:

@media (prefers-color-scheme: dark) {
  img {
    /* Slightly dim non-essential images */
    opacity: 0.8;
  }

  /* But keep logos crisp */
  .logo {
    opacity: 1;
    filter: brightness(1.2);
  }
}

Hinzufügen einer Schaltfläche zum Umschalten des Themas

Fügen wir einen manuellen Theme-Umschalter für Benutzer hinzu, die ihre Systemeinstellungen überschreiben möchten.

Hier ist die vollständige Implementierung:

Fügen Sie zunächst diesen HTML-Code für Ihre Umschalttaste hinzu:

@media (prefers-color-scheme: dark) {

  /* Your dark mode styles go here */

}

Und hier ist das JavaScript, mit dem alles funktioniert:

/* In your root CSS file */
:root {
  /* Light mode colors (default) */
  --background: #ffffff;
  --text: #333333;
  --surface: #f5f5f5;
  --accent: #0066cc;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode colors */
    --background: #1a1a1a;
    --text: #ffffff;
    --surface: #2d2d2d;
    --accent: #66b3ff;
  }
}

Mit diesem Code erhalten Sie eine umschaltbare Schaltfläche, die:

• Respektiert standardmäßig die Systemeinstellungen des Benutzers
• Speichert ihre manuellen Einstellungen in localStorage
• Bleibt auch beim erneuten Laden der Seite bestehen
• Zeigt ein Sonnen-/Mondsymbol basierend auf dem aktuellen Thema
• Sanfte Übergänge zwischen den Modi

Profi-Tipp: Fühlen Sie sich frei, die Symbole anzupassen – Sie könnten SVGs verwenden oder sogar ein aufwändigeres Schalterdesign erstellen. Stellen Sie einfach sicher, dass das aktuelle Thema klar erkennbar ist!

Abschluss

Also los geht’s – Ihre Website verfügt jetzt über eine voll funktionsfähige Dark-Mode-Funktion, die professionell erstellt wurde!

Sie verfügen über systembezogene Themen, flüssige Animationen, korrekte Bildwiedergabe und sogar eine schöne Umschalttaste.

Sie müssen nicht am ersten Tag alles perfekt haben, denken Sie daran.

Führen Sie die reine Implementierung durch, treiben Sie sie voran und nehmen Sie Änderungen vor, während Sie fortfahren und wenn die Leute die Website nutzen.

Ihre Benutzer werden sich über den Dunkelmodus freuen, auch wenn dieser nicht vollständig funktioniert.

Das obige ist der detaillierte Inhalt vonBereiten Sie den Dunkelmodus Ihrer Website in wenigen Minuten vor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!