|

Dunkle Zeiten fürs Frontend - Dark Mode mit Tailwind CSS!

Als Frontendentwickler kommt man an ein zwei Buzzwords momentan nicht vorbei - Tailwind und Dark Mode.

Tailwind bringt von Haus aus bereits Dark Mode Support mit. Es wird dafür das Prefix dark: bereitgestellt. Dieses wird analog zu anderen Varianten benutzt.

Umsetzung via dark: Prefix

Beispiel aus Tailwind Docs:

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

Das dark Prefix ermöglicht eine sehr granulare Kontrolle darüber, welche Styles im Dark Mode greifen sollen. Dabei gibt es keine Beschränkungen welche Styles veränderbar sind. Es lässt sich also nicht nur die Farbe ändern, sondern auch Text Größe etc..

Allerdings hat dieser Ansatz auch einen Nachteil. Es muss immer alles doppelt geschrieben werden.

Umsetzung als Tailwind Theme

Alternativ ließe sich der Dark Mode auch als Theme betrachten. Alle Farben werden dann als CSS Custom Property definiert und im Dark Mode werden diese einfach überschrieben.

/* css File: */
:root {
    --color-bg-primary: rgb(200, 133, 255);
    --color-text-primary: rgb(50, 50, 50);
}

.dark {
    --color-bg-primary: rgb(112, 38, 173);
    --color-text-primary: rgb(200, 200, 200);
}
/* tailwind.config.js: */
...
  darkMode: "class",
  theme: {
    extend: {
      textColor: {
        primary: "var(--color-text-primary)"
      },
      backgroundColor: {
        primary: "var(--color-bg-primary)"
      }
    }
  }
...

Mit diesem Ansatz können ganz einfach Themes erstellt werden ohne zusätzliche Varianten nutzen zu müssen.

Die Code Sandbox demonstriert ein funktionierendes Beispiel. Außerdem wird gezeigt wie sich CSS Custom Properties zusammen mit Tailwinds Opacity System nutzen lassen.