← Alle Beiträge

Anleitungen

Einen universellen Dunkelmodus mit CSS bauen

17 Mai 2026 · von JustZix Team

Die meisten Seiten liefern immer noch einen blendend weißen Hintergrund aus, und nicht jede von ihnen bietet ein dunkles Theme. Mit JustZix können Sie jeder URL eine CSS-Regel anhängen und einen Dunkelmodus erzwingen, der Ihnen überallhin folgt. Hier sind die Rezepte, die ich tatsächlich verwende.

Der schnellste Dunkelmodus: die Seite invertieren

Der schnellste Trick ist, das gesamte Dokument zu invertieren und den Farbton zurückzudrehen, damit die Farben ungefähr korrekt bleiben. Fotos und Videos werden ebenfalls invertiert, also drehen wir diese ein zweites Mal zurück.

html {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
img, video, picture, canvas, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

Das ist ein Einzeiler-Gewinn. Es ist nicht perfekt — Schatten sehen seltsam aus und Markenfarben verschieben sich — aber für eine schnelle Lesesitzung ist es unschlagbar. Erstellen Sie eine JustZix-CSS-Regel, passen Sie sie der gewünschten Domain an, einfügen, fertig.

Ein saubererer nativer Dunkelmodus

Für Seiten, die Sie täglich besuchen, schlägt ein handabgestimmtes Theme die Inversion. Statt zu invertieren, übermalen Sie Hintergründe und Text direkt. Das lässt Bilder und Akzentfarben unberührt.

:root {
  --bg: #16181c;
  --bg-soft: #1f232a;
  --text: #d6d9de;
}
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
header, footer, nav, aside, section, article, main,
.card, .panel, .box {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
}
a { color: #6ea8fe !important; }

Die Selektoren sind absichtlich breit. Sie werden selten präzise sein müssen — die meisten Layouts verwenden eine Handvoll struktureller Tags und generische Klassennamen. Stimmen Sie die Variablen einmal ab, und die ganze Seite folgt.

Die hellen Überreste beheben

Nach dem Basis-Theme bleiben ein paar Elemente weiß: Eingabefelder, Code-Blöcke, Tabellen. Fegen Sie sie in einer Regel zusammen.

input, textarea, select, button,
pre, code, table, th, td {
  background-color: #20242b !important;
  color: #d6d9de !important;
  border-color: #2f343d !important;
}
::placeholder { color: #6b7280 !important; }
::selection { background: #3b4252; color: #fff; }

Nur nachts

Wenn Sie den Dunkelmodus nur nach Sonnenuntergang wollen, wickeln Sie die Regel in eine Media Query, damit sie Ihren Betriebssystemplan respektiert.

@media (prefers-color-scheme: dark) {
  html, body { background-color: #16181c !important; color: #d6d9de !important; }
}

Tipps, die Zeit sparen

• Fügen Sie immer !important hinzu — Seiten-Stylesheets laden nach Ihrem und überschreiben einfache Regeln.
• Beginnen Sie mit dem Invert-Trick, gehen Sie dann für Ihre fünf wichtigsten Seiten zu einem nativen Theme über.
• Behalten Sie einen gemeinsamen :root-Variablenblock, damit jede Seite dieselbe Palette verwendet.
• Testen Sie Bildlaufleisten und Auswahlfarben — sie sind leicht zu vergessen und brechen die Stimmung.

Wollen Sie mehr Ausgangspunkte? Durchstöbern Sie unsere fertigen Beispiele oder lesen Sie den Begleitbeitrag über benutzerdefinierte Akzentfarben. Neu hier? Laden Sie JustZix herunter und fügen Sie Ihre erste Regel in weniger als einer Minute ein.