Dark Mode in CSS

Mit der Einführung von Dark Mode in macOS hat Safari Technology Preview 68 ein neues Feature namens prefers-color-scheme veröffentlicht, mit dem wir über eine Media Query erkennen können, ob der Benutzer den Dark Mode aktiviert hat. Safari Technology Preview 71 hat auch supported-color-schemes, was… nun, ich könnte Ihnen nicht genau sagen, was es tut.

Die Media Query sieht so aus

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

}

Sie wird vielleicht noch nicht überall unterstützt, aber es ist eine großartige progressive Verbesserung, sie ist gut/smart/standardkonform implementiert, sodass sie sicher zu verwenden ist. Genau wie prefers-reduced-motion!

Es geht nicht nur darum, dunkle Hintergründe mit hellem Text zu setzen...

Kürzlich beschrieb Mark Otto wie wir prefers-color-scheme heute nutzen können, um Themes zu erstellen, die sich dynamisch an die neue Benutzereinstellung anpassen. Und das Tolle an diesem Beitrag ist, dass Mark es als ein Zugänglichkeitsproblem betrachtet und zeigt, wie er es auf seiner eigenen Website verwendet, um Bilder anzupassen, damit sie für den Benutzer nicht zu hell sind.

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

Im obigen Code erkennt Mark mit der Media Query, ob der Benutzer den Dark Mode aktiviert hat, und macht die Bilder dann dunkler, damit sie zu einem dunklen Hintergrund passen.

CSS Custom Properties können nützlich sein

Das erinnert mich an einen ausgezeichneten Beitrag von Marcin Wichary, in dem er eine ähnliche Technik erforscht und einen Schritt weiter geht, indem er allerlei Filter hinzufügt, um einen viel höheren Kontrast zu gewährleisten.

html {
  --text-color-normal: #0a244d;
  --text-color-light: #8cabd9;
}

html[data-theme='dark'] {
  --text-color-normal: hsl(210, 10%, 62%);
  --text-color-light: hsl(210, 15%, 35%);
  --text-color-richer: hsl(210, 50%, 72%);
  --text-color-highlight: hsl(25, 70%, 45%);
}

Das bedeutet nicht, dass Sie Ihre Marke aufgeben müssen

Andy Clarke hat sich auch Gedanken darüber gemacht, wie wir dieses schicke neue CSS-Feature nutzen und einen Dark Mode auf unserer Website anwenden könnten. Er beschreibt, wie Farben ausgewählt werden können, damit unsere hellen/dunklen Themes konsistent in Bezug auf das Branding sind, und wie wir möglicherweise eine leichtere Schriftstärke für dunklere Hintergründe verwenden möchten. Er schreibt:

Das Design für Dark Mode sollte nicht nur mit der Auswahl dunklerer Farben enden. Sie sollten auch die Änderung von Typografie-Stilen in Betracht ziehen, um die Lesbarkeit für Benutzer von Dark Mode zu erhalten. Heller Text auf dunklen Hintergründen erscheint kontrastreicher als wenn dieselben Farben umgekehrt verwendet werden. Um Ihre Dark Mode-Designs besser lesbar zu machen, müssen Sie Ihren Texten mehr Weiß-/Schwarzraum hinzufügen.

Wenn Ihre Schriftarten eine leichtere Stärke anbieten, wird die Verwendung dieser für Ihr Dark Mode-Design die Buchstabenformen öffnen und sie weiter auseinander erscheinen lassen...

Was war das? Es klang sicher wie der freudige Applaus von Typografie-Nerds und Designern überall!

Es geht um inklusives Design

Charles Reynolds-Talbot schreibt über seine Freundin Molly, die Schwierigkeiten mit kontrastreichen weißen Hintergründen und schwarzem Text hat.

Wenn man davon ausgeht, dass ein Style-Switcher die Lösung für dieses Problem ist, ist das nichts Neues. Es ist nur etwas, das nicht mehr angesagt ist. Aber hier sollte es nicht um Mode gehen, sondern um inklusives Design für alle. Die Lösung dieses Problems für Molly wird tatsächlich Probleme für andere Menschen lösen. Ein Dark Mode ist besser für Menschen, die unter Migräne leiden, einen Kater haben oder einfach nur nachts im Bett im Internet surfen, wenn das Licht aus ist. Das Design für wenige macht die Dinge für viele besser.

Dark Mode standardmäßig

Denken Sie daran, dass Sie es umkehren und standardmäßig auf Dark Mode umstellen können, aber zu einem Light Theme wechseln, wenn ein Benutzer dies ausdrücklich wünscht.

body {
  background-color: black;
  color: white;
}
@media screen and (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}