Details im Dunkeln

Die Farben sind fertig, aber ein paar Details verraten noch, dass die Seite für den hellen Modus entworfen wurde. Sehen wir sie uns an.

Schatten. Ein Schatten ist ein dunklerer Bereich um eine Box, und er lässt die Karten über der Seite zu schweben scheinen. Auf einer dunklen Seite gibt es aber kaum etwas, das dunkler ist als der Hintergrund, der Schatten ist darum kaum zu sehen. Hier ist dieselbe Karte mit demselben Schatten auf Hell und auf Dunkel, und rechts mit einem Rahmen statt des Schattens:

Im Dark Mode heben sich Karten durch ihren helleren Hintergrund ab, den unsere schon haben, und oft auch durch einen dünnen Rahmen:

<div class="rounded-2xl bg-white shadow-md dark:bg-stone-800 dark:border dark:border-stone-700">

dark:border fügt einen 1 px breiten Rahmen hinzu, nur im Dark Mode. Vergiss seine Farbe nicht: Ohne Farbklasse hat ein Rahmen die Farbe des Textes (currentColor), hier das sehr helle stone-100, was viel zu grell wäre. Der Schatten kann bleiben: Im hellen Modus erfüllt er seinen Zweck, und im Dark Mode stört er nicht.

Abzeichen. Oskar hat ein grünes Abzeichen „Neu“ (bg-emerald-100 text-emerald-700). Auf einer dunklen Karte blendet so ein heller Fleck. Im Dark Mode bekommen Abzeichen meist einen durchscheinenden Farbton ihrer Farbe: dark:bg-emerald-500/20 ist emerald-500 mit nur 20 %, den Rest lässt die dunkle Karte durchscheinen, das Abzeichen ist also dunkelgrün. Mit hellem Text (dark:text-emerald-300) ist es gut zu lesen:

Varianten kombinieren. Die Links in der Kopfzeile werden orange, wenn die Maus darüber ist (hover:text-orange-600). Im Dark Mode ist orange-600 wieder zu dunkel. Wie du von enabled:hover: aus der Lektion über Zustände weißt, lassen sich Varianten verketten: dark:hover:text-orange-400 gilt nur, wenn beides zutrifft: Der Dark Mode ist an, und die Maus ist über dem Link. dark: steht meist vorn.