In diesem Artikel erfahren Sie, wie Sie den Dunkelmodus in Tailwind CSS implementieren. Der Dunkelmodus ist zu einem beliebten Designtrend geworden, da er ein besseres Benutzererlebnis in Umgebungen mit wenig Licht bietet und die Belastung der Augen verringert. Tailwind erleichtert die Unterstützung des Dunkelmodus mit seinen integrierten Dienstprogrammen.

1. So funktioniert der Dunkelmodus bei Rückenwind

Tailwind bietet einen einfachen Ansatz zur Implementierung des Dunkelmodus durch die Dunkelvariante. Standardmäßig überprüft es die Systemeinstellungen des Benutzers für den Dunkelmodus und wendet die entsprechenden Stile an.

Dunkelmodus in Tailwind einstellen:

Aktivieren Sie in Ihrer tailwind.config.js-Datei den Dunkelmodus, indem Sie ihn auf „Medium“ (Systemeinstellung) oder „Klasse“ (manuelles Umschalten) einstellen:

module.exports = {
  darkMode: 'media', // or 'class'
}

• Medien: Aktiviert den Dunkelmodus basierend auf den Betriebssystemeinstellungen des Benutzers.
• Klasse: Ermöglicht das manuelle Umschalten des Dunkelmodus durch Hinzufügen einer Dunkelklasse.

2. Styling für den Dark Mode

Sobald der Dunkelmodus aktiviert ist, können Sie die dunkle Variante verwenden, um Stile speziell für den Dunkelmodus anzuwenden.

Beispiel:

    This is a dark mode toggle example

• bg-white und text-black gelten für den Lichtmodus.
• Dark:bg-gray-800 und Dark:Text-White gelten, wenn der Dunkelmodus aktiv ist.

Diese Flexibilität ermöglicht es Ihnen, Ihre Komponenten für den dunklen und hellen Modus unterschiedlich zu gestalten.

3. Dunkler Modus mit Tailwinds Klassenstrategie

Wenn Sie möchten, dass Benutzer manuell zwischen hellem und dunklem Modus wechseln, verwenden Sie die Klassenstrategie. Dadurch können Sie den Dunkelmodus umschalten, indem Sie die Dunkelklasse zum - oder

Beispiel mit JavaScript:

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

Bei diesem Setup wird durch Klicken auf die Schaltfläche die Dunkelklasse umgeschaltet und zwischen hellem und dunklem Modus gewechselt.

4. Verwenden des Dunkelmodus für bestimmte Elemente

Manchmal möchten Sie möglicherweise, dass nur bestimmte Abschnitte Ihrer Webseite in den Dunkelmodus wechseln, während andere Teile unverändert bleiben. Sie können das Dark-Mode-Styling auf Elementbasis anwenden, indem Sie die Dark-Mode-Klassen in bestimmte Container einschließen.

Beispiel:

    

        This section is in dark mode, while the outer section remains light.
    

Mit dieser Methode haben Sie mehr Kontrolle darüber, welche Teile Ihres Designs vom Dunkelmodus betroffen sind.

5. Anpassen der Farben im dunklen Modus

Sie können auch die Farben im Dunkelmodus in Ihrer tailwind.config.js-Datei anpassen, indem Sie die Farbpalette erweitern.

Beispiel:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

Jetzt können Sie diese benutzerdefinierten Dunkelmodusfarben wie folgt verwenden:

    Custom Dark Mode Colors

Abschluss

Tailwind CSS macht die Implementierung des Dunkelmodus unkompliziert, sei es über Systemeinstellungen oder manuelles Umschalten. Mit der dunklen Variante können Sie ein optisch ansprechendes Design erstellen, das sich nahtlos an unterschiedliche Benutzerpräferenzen anpasst.

Folgen Sie mir auf LinkedIn- Ridoy Hasan
Besuchen Sie meine Website-ridoyweb.com
weiterlesen-
Best Practices zum Schreiben von CSS