← Alle Beiträge

Anleitungen

Dark Mode für jede Website — 4 CSS-Ansätze

15 Mai 2026 · von JustZix Team

Dein Betriebssystem hat seit Jahren einen Dark Mode. Dein Browser unterstützt ihn. Die meisten Apps respektieren ihn. Dann öffnest du irgendeine Dokumentation, einen Blog oder ein Intranet von 2014 — und bekommst um 23 Uhr einen 100%-weißen Hintergrund ins Gesicht. Vier Methoden, das ein für alle Mal zu beheben.

Warum dieses Problem überhaupt existiert

Der CSS-Standard prefers-color-scheme ist seit 2019 in Chrome und seit 2018 in Safari. Dein Betriebssystem kennt deine Präferenz, der Browser gibt sie weiter, Seiten sollten sie respektieren. Sollten — in der Praxis ignorieren ~40% der Seiten sie. Gründe: Legacy-Codebasis, kein Budget für ein zweites Theme, Marketing, das „Markenkonsistenz" will, der Autor ist noch nicht dazu gekommen.

Wenn der Autor es nicht für dich tut — tu es selbst. Vier Methoden, in der Reihenfolge zunehmender Eleganz.

Methode 1 — universeller Filter (funktioniert auf allem)

Ein Snippet, passt auf jede Seite, keine Analyse des konkreten CSS nötig:

html {
  filter: invert(0.92) hue-rotate(180deg);
  background: #1a1a1a;
}

/* Bilder, Video und iframes zurück-invertieren, damit sie
   natürlich aussehen — sonst sehen die Selfies deiner Freunde
   aus wie mit dem Grünhaut-Filter. */
img, video, picture, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

Trick: invert(0.92) statt vollem invert(1) ergibt ein weicheres Schwarz als ein harter Weiß→Schwarz-Tausch — angenehmer für die Augen. hue-rotate(180deg) korrigiert die Farben, sodass Orange Orange bleibt (und nicht zu Blau wird).

Vorteile: funktioniert überall, null Analyse.
Nachteile: Schlagschatten, Verläufe, feine Grautöne sehen seltsam aus. Manche fixed-Elemente (sticky Header) können beim Scrollen desynchronisieren.

Methode 2 — prefers-color-scheme: dark erzwingen

Seiten, die einen Dark Mode haben, aber nur auf die OS-Präferenz reagieren. Was, wenn du das OS auf Hell lässt (weil du in Figma designst), aber die GitHub-Docs dunkel willst? Überschreibe matchMedia:

// prefers-color-scheme: dark per JS erzwingen
const dark = window.matchMedia('(prefers-color-scheme: dark)');
Object.defineProperty(dark, 'matches', {
  get: () => true,
  configurable: true,
});

// Listener benachrichtigen (Seiten, die per addEventListener lauschen)
dark.dispatchEvent(new Event('change'));

Das funktioniert auf jeder Seite, die window.matchMedia('(prefers-color-scheme: dark)') zur Erkennung nutzt — alle modernen React/Vue-Apps. Funktioniert nicht auf Seiten, die nur einmal beim Laden erkennen (dann müsstest du neu laden), oder auf statischem CSS ohne JS-Erkennung.

Methode 3 — CSS Custom Properties überschreiben

Seiten, die auf CSS-Variablen aufbauen (~60% moderner Web-Apps), haben üblicherweise Theme-Tokens wie --bg-primary, --text-primary. Öffne die DevTools, finde die Namen, überschreibe sie:

/* Beispiel: Stripe Dashboard, wo alles variablenbasiert ist */
:root {
  --color-canvas-default: #0d1117 !important;
  --color-canvas-subtle: #161b22 !important;
  --color-fg-default: #c9d1d9 !important;
  --color-fg-muted: #8b949e !important;
  --color-border-default: #30363d !important;
}

Vorteile: präzise, verfälscht keine Bilder oder Schatten.
Nachteile: 5 Minuten Wühlen in den DevTools, um die Variablennamen zu finden. Die Seite muss CSS-Variablen verwenden (Check: document.documentElement.style in der Konsole).

Methode 4 — dediziertes Dark Theme pro Seite

Für Seiten, auf denen du jeden Tag stundenlang bist — 30 Minuten für ein maßgeschneidertes Theme lohnen sich. Selektives Überschreiben:

/* Dein generisches Firmen-Intranet */
body, .page-content, .sidebar, .top-bar {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}

.card, .panel, .modal {
  background: #242424 !important;
  border-color: #333 !important;
}

a, a:visited { color: #58a6ff !important; }
a:hover { color: #79c0ff !important; }

input, textarea, select {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Tabellen — am kritischsten für die Lesbarkeit */
table th { background: #2d2d2d !important; color: #fff !important; }
table tr:nth-child(odd) { background: #1f1f1f !important; }
table tr:nth-child(even) { background: #1a1a1a !important; }

Beginne mit den Hauptcontainern (body, page), arbeite dich zu den Komponenten vor (Cards, Modals), schließe mit Formularelementen und Tabellen ab. Ohne !important gewinnst du meist nicht — die Seite hat ihre eigenen Styles mit höherer Spezifität.

Gängige Fallstricke

• Inline-background-image (z. B. style="background: url(...)") — der Filter aus Methode 1 erfasst es nicht immer. Ergänze [style*="background-image"] separat.
• Schlagschatten auf dunklem Hintergrund sehen aus wie Halos. Entferne sie (box-shadow: none) oder ersetze sie durch einen helleren Akzent.
• Markenfarben (Logos, farbige Icons) verlieren nach dem Invertieren ihre Wiedererkennung. Füge Ausnahmen hinzu: .brand-logo { filter: invert(1) hue-rotate(180deg) !important; }.
• Formulare haben oft color: black inline hartkodiert. Überschreibe es explizit: input { color: #e0e0e0 !important; }.
• Sticky-/fixed-Elemente können mit dem Filter aus Methode 1 beim Scrollen desynchronisieren. Meist akzeptabel, aber gut zu wissen.

So bindest du es in JustZix ein

1. Installiere JustZix (2 Minuten).
2. Erstelle einen Ordner namens „Dark Mode".
3. Regel „Dark Mode überall": URL-Muster *, CSS = Methode 1. Setze sie standardmäßig inaktiv — schalte sie ein, wenn du sie brauchst.
4. Regel pro Lieblingsseite: Muster https://myapp.com/*, CSS = Methode 3 oder 4 (mit konkreten Tokens / Selektoren). Immer aktiv.
5. Schalte den ganzen Ordner mit einem Klick auf den schwebenden Button um — Hell/Dunkel in einem Zug.

Was kommt als Nächstes

Dieselbe Hierarchie (universell → präzise pro Seite) gilt auch in anderen Regelkategorien — siehe Beispiele und Anwendungsfälle. Dark Mode ist nur der offensichtlichste Fall.

Installiere JustZix kostenlos und kontrolliere endlich, wie die Seiten aussehen, auf die du 8 Stunden am Tag starrst.