Dunkler Modus: Es geht nicht nur darum, Farben umzukehren

Warum Maison Code darüber spricht

Bei Maison Code Paris fungieren wir als das architektonische Gewissen unserer Kunden. Wir übernehmen oft „moderne“ Stacks, die ohne grundlegendes Verständnis für Skalierung gebaut wurden.

Wir diskutieren dieses Thema, weil es einen kritischen Wendepunkt in der technischen Reife darstellt. Die korrekte Implementierung unterscheidet ein fragiles MVP von einer widerstandsfähigen Plattform auf Unternehmensniveau.

Die Erwartung der Dunkelheit

Im Jahr 2020 war der Dark Mode ein „Nice to have“. Im Jahr 2025 ist es eine Pflicht. iOS, Android, macOS und Windows unterstützen alle den systemweiten Dunkelmodus. Wenn Ihr Benutzer sein Telefon auf den Dunkelmodus eingestellt hat (um den Akku zu schonen oder seine Augen nachts zu schonen), er Ihre Website öffnet und von einem Strahl weißen #FFFFFF-Lichts getroffen wird … Sie schließen die Registerkarte. Es ist körperlich schmerzhaft. Dunkelmodus ist keine Funktion; es ist Benutzerempathie.

Warum Maison Code den Dark Mode diskutiert

Bei Maison Code streben wir nach „The Seamless Experience“. Wir stellen sicher, dass die Websites unserer Kunden die Systemeinstellungen des Benutzers automatisch berücksichtigen („Prefers-Color-Schema“). Aber was noch wichtiger ist: Wir verstehen, dass der Dark Mode eine Branding-Herausforderung ist. Luxusmarken setzen auf bestimmte Farben. Wie übersetzt man „Chanel Black on White“ in den Dark Mode, ohne die Identität zu verlieren? Wir kümmern uns täglich um diese semantische Übersetzung. Wir „invertieren“ nicht nur Farben. Wir „interpretieren“ die Marke für Umgebungen mit wenig Licht.

Die Engineering-Strategie: CSS-Variablen + HSL

(Siehe CSS-Variablen). Der naive Ansatz ist: body.dark { Hintergrund: schwarz; Farbe: weiß; }. Das sieht schrecklich aus. Reines Schwarz („#000“) führt auf OLED-Bildschirmen beim Scrollen zu „Verschmierungen“. Reinweißer Text („#FFF“) auf reinem Schwarz führt zu einer Überanstrengung der Augen (Lichthofbildung).

Der semantische Ansatz: Wir definieren Farben mithilfe von HSL (Hue, Saturation, Lightness). Dadurch können wir die Helligkeit programmgesteuert ändern.

„css :root { /* Markenfarbton (z. B. Blau) */ —brand-h: 210; —brand-s: 100 %;

/* Lichtmodus */ —bg-l: 100 %; —text-l: 10 %;

—bg-color: hsl(var(—brand-h), 10%, var(—bg-l)); —text-color: hsl(var(—brand-h), 10%, var(—text-l)); }

[data-theme=“dark”] { /* Dunkler Modus: Drehen Sie einfach die Helligkeit um */ —bg-l: 10 %; —text-l: 90 %; } „

Beachten Sie, dass wir nicht nur „Schwarz“ ausgewählt haben. Wir haben uns für ein „Very Dark Blue“ („hsl(210, 10 %, 10 %)“) entschieden. Dadurch bleibt der Markenton auch im Dunkelmodus erhalten. Es fühlt sich satter und hochwertiger an als flaches Grau.

Technische Umsetzung: Der Toggle & The Flicker

Der schwierigste Teil des Dunkelmodus ist der FOUC (Flash of Unstyled Content) oder Flash of White.

1. Der Benutzer lädt die Seite (Server sendet HTML).
2. Der Browser stellt standardmäßig weißen Hintergrund dar.
3. JS lädt, liest „localStorage“ und sieht „Dark“.
4. JS fügt die Klasse „.dark“ hinzu.
5. Die Seite blinkt und wird schwarz. Dieser Blitz im Bruchteil einer Sekunde zerstört das Benutzererlebnis.

Die Lösung: Ein blockierendes Skript in „“. Sie müssen ein kleines Skript einfügen, bevor das CSS geladen wird.

<Kopf>
  <Skript>
    (Funktion() {
      const gespeichert = localStorage.getItem('theme');
      const system = window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (stored === 'dark' || (!stored && system)) {
        document.documentElement.classList.add('dark');
      }
    })();
  </script>
</head>
„
Da sich dieses Skript im Kopf befindet und blockiert, führt der Browser es *vor* dem ersten Mal aus.
Die Seite wird zunächst dunkel gerendert. Kein Flimmern.

## Entwerfen für Tiefe

Im Lichtmodus verwenden wir **Schatten**, um die Tiefe anzuzeigen (Karten schweben im Hintergrund).
Im Dunkelmodus sind Schatten unsichtbar (dunkler Schatten auf dunklem Hintergrund).
**Lösung**: Verwenden Sie **Helligkeit**, um Tiefe anzuzeigen.
* Hintergrund: Stufe 0 (am dunkelsten).
* Karte: Level 1 (etwas leichter).
* Modal: Stufe 2 (Leichter).
* Taste: Stufe 3 (am hellsten).
Anstelle von „Schatten“ verwenden wir „Überlagerungen“ oder leichte Farbverschiebungen im Hintergrund.

## Bilder und Dunkelmodus

Helle Bilder im Dunkelmodus können störend sein.
**Tipp**: Reduzieren Sie die Helligkeit und den Kontrast der Bilder im dunklen Modus leicht.

„css
[data-theme="dark"] img {
  Filter: Helligkeit (0,8) Kontrast (1,2);
}
„
Dadurch harmonieren die visuellen Elemente besser mit der dunklen Benutzeroberfläche.

## Die Sicht des Skeptikers

„Der Dunkelmodus ist eine Modeerscheinung. Ich mag weißes Papier.“
**Gegenpunkt**:
1. **Akku**: Auf OLED-Bildschirmen (iPhone X+) sind dunkle Pixel ausgeschaltet. Der Dunkelmodus spart etwa 30 % Akkulaufzeit.
2. **Gesundheit**: Die Reduzierung der nächtlichen Belastung durch blaues Licht trägt zur Schlafhygiene bei.
3. **Auswahl**: Geben Sie dem Benutzer die Wahl. Wenn Sie den Lichtmodus erzwingen, sind Sie arrogant.

## FAQ

**F: Sollte ich eine Umschalttaste verwenden?**
A: Ja. „Prefers-Color-Schema“ zuerst automatisch erkennen, aber Benutzerüberschreibung zulassen. Platzieren Sie es in der Fußzeile oder Kopfzeile.

**F: Logos umkehren?**
A: Wenn Ihr Logo aus schwarzem Text besteht, verschwindet dieser im Dunkelmodus.
Sie benötigen ein SVG-Logo, das „currentColor“ erbt, oder Sie müssen die Bildquelle („logo-dark.png“) austauschen.

## 11. Erweiterte Symbolverarbeitung (SVGcurrentColor)

Stoppen Sie den Export schwarzer PNG-Symbole.
Verwenden Sie Inline-SVGs mit „fill="currentColor"`.
Dadurch erbt das Symbol die Textfarbe seines übergeordneten Symbols.
Wenn der übergeordnete Text weiß ist (Dunkler Modus), ist das Symbol weiß.
Wenn der übergeordnete Text schwarz ist (Lichtmodus), ist das Symbol schwarz.
Dadurch entfällt die Notwendigkeit von Duplikaten „icon-dark.svg“ und „icon-light.svg“.
Ein Vermögenswert. Unendliche Themen.

## 12. Anhaltende Präferenz ohne FOUC

Die Debatte „Cookie“ vs. „LocalStorage“.
Wenn Sie Server Side Rendering (Next.js) verwenden, ist „localStorage“ auf dem Server nicht verfügbar.
Der Server rendert also den Light-Modus. Der Kunde spendet Feuchtigkeit im Dunkelmodus. **Flackern**.
**Lösung**: Cookies.
Wenn der Benutzer das Design umschaltet, setzen Sie ein Cookie „theme=dark“.
Lesen Sie dieses Cookie in „middleware.ts“ oder „getServerSideProps“.
Injizieren Sie „<html class="dark">` auf dem Server.
Jetzt kommt der HTML-Code bereits dunkel an. Perfekter erster Anstrich.

## 13. Barrierefreiheit: Kontrastverhältnisse (WCAG)

Der Dunkelmodus ist bei Astigmatismus oft *schwerer* zu erkennen.
„Halation“ (Halo-Effekt) tritt bei weißem Text auf schwarzem Hintergrund auf.
**Regel**: Verwenden Sie niemals reines Schwarz („#000000“).
Verwenden Sie Dunkelgrau („#121212“ oder ähnlich). Es reduziert die Belastung der Augen.
**Testen**: Verwenden Sie die „Kontrast“-Auswahl von Chrome DevTools.
Stellen Sie sicher, dass Ihr Text dem **AA-Standard (4,5:1)** entspricht.
Oftmals funktioniert Ihr „Markenblau“ auf Weiß, scheitert jedoch auf Schwarz.
Sie benötigen „--brand-text-dark“ (ein helleres Blau) speziell für Text im Dunkelmodus.

## 14. Dynamischer Umgang mit Systemdesignänderungen

Der Benutzer ändert seinen Mac *während des Surfens* von Hell auf Dunkel.
Passt sich Ihre Website sofort an?
Verwenden Sie den Ereignis-Listener „change“ auf „matchMedia“.
„Javascript
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? „dunkel“ : „hell“;
    // Nur aktualisieren, wenn der Benutzer die Logik nicht explizit überschrieben hat
    if (!localStorage.getItem('theme')) {
        document.documentElement.classList.toggle('dark', e.matches);
    }
});
„
Dadurch entsteht das „magische“ Gefühl, bei dem die Website mit dem Betriebssystem harmoniert.

## 15. OLED-Optimierung (Echtes Schwarz vs. Grau)

Es gibt eine Debatte.
**Reines Schwarz (#000000)** schaltet die Pixel aus. Es spart maximal Batterie.
**Dunkelgrau (#121212)** verbessert die Textlesbarkeit und reduziert OLED-Verschmierungen (violette Spur beim Scrollen).
**Urteil des Maison Code**: Verwenden Sie Dunkelgrau für Oberflächen (Karten, Hintergründe) und reines Schwarz für Ränder oder Negativflächen.
Dadurch erhalten Sie das „Premium-Feeling“ ohne visuelle Artefakte.
Wir verwenden auch „meta name="theme-color"`, um die Safari-Browserleiste passend zu Ihrem Hintergrund zu tönen und so ein randloses App-ähnliches Erlebnis zu schaffen.

## 16. Serverseitige Theme-Erkennung (Client-Hinweise)

Kekse sind gut. Kundenhinweise sind besser.
„Sec-CH-Prefers-Color-Schema“.
Wenn der Browser diesen Header sendet, weiß der Server, dass der Benutzer den Dunkelmodus bevorzugt, *ohne* ein Cookie zu lesen.
Das ist der heilige Gral.
Dadurch kann bereits der erste Besuch (kein Cookie) perfekt thematisiert werden.
**Maison Code** implementiert diesen hochmodernen Standard für unsere Kunden, um Zero-Flicker beim ersten Byte zu garantieren.

## 17. Warum Maison Code?

Bei **Maison Code** wechseln wir nicht nur die Farben.
Wir überarbeiten die **Markenidentität** für Umgebungen mit wenig Licht.
Wir prüfen Kontrastverhältnisse, um die Einhaltung der Barrierefreiheit (ADA/WCAG) sicherzustellen.
Wir implementieren das „Flicker-Free“-Skript, um sicherzustellen, dass Ihre Benutzer nie geflasht werden.
Wir glauben, dass Dark Mode eine Empathieübung ist. Es zeigt, dass es Ihnen wichtig ist, wie Ihr Benutzer Ihre Inhalte konsumiert.

## 17. Fazit

Im Dark Mode geht es nicht darum, Farben zu ändern. Es geht darum, Kontrastverhältnisse zu überprüfen (WCAG AA), die Tiefenwahrnehmung zu verwalten und den Benutzerkontext zu respektieren.
Gut umgesetzt, fühlt es sich nachts an wie der Innenraum eines Luxusautos.
Schlecht implementiert, fühlt es sich an wie eine kaputte Eingabeaufforderung.
Lassen Sie Ihre Marke nicht in 50 % der Fälle kaputt aussehen.


<hr style="margin: 1rem 0" />

### Ihre Benutzer blenden?
Wir implementieren einen flimmerfreien System-Dunkelmodus, der die Akkulaufzeit und die Augen des Benutzers schont.
**[Beauftragen Sie unsere Architekten](/contact)**.