← All posts

Tutorials

Build a universal dark mode with CSS

17 May 2026 · by JustZix Team

Most sites still ship a blinding white background, and not every one of them offers a dark theme. With JustZix you can attach a CSS rule to any URL and force a dark mode that follows you everywhere. Here are the recipes I actually use.

The fastest dark mode: invert the page

The quickest trick is to invert the whole document and rotate the hue back so colors stay roughly correct. Photos and videos get inverted too, so we rotate those back a second time.

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

This is a one-line win. It is not perfect — shadows look odd and brand colors shift — but for a quick reading session it is unbeatable. Create a JustZix CSS rule, match it to the domain you want, paste, done.

A cleaner native dark mode

For sites you visit daily, a hand-tuned theme beats inversion. Instead of inverting, you repaint backgrounds and text directly. This keeps images and accent colors untouched.

: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; }

The selectors are intentionally broad. You will rarely need to be precise — most layouts use a handful of structural tags and generic class names. Tweak the variables once and the whole page follows.

Fix the bright leftovers

After the base theme, a few elements stay white: inputs, code blocks, tables. Sweep them up in one rule.

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; }

Only at night

If you only want dark mode after sunset, wrap the rule in a media query so it respects your OS schedule.

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

Tips that save time

• Always add !important — site stylesheets load after yours and will override plain rules.
• Start with the invert trick, then graduate to a native theme for your top five sites.
• Keep a shared :root variable block so every site uses the same palette.
• Test scrollbars and selection colors — they are easy to forget and break the mood.

Want more starting points? Browse our ready-made examples or read the companion piece on custom accent colors. New here? Download JustZix and paste your first rule in under a minute.