← Wszystkie wpisy

Poradniki

Zbuduj uniwersalny tryb ciemny za pomocą CSS

17 maja 2026 · autor JustZix Team

Większość stron nadal dostarcza oślepiająco białe tło, a nie każda z nich oferuje ciemny motyw. Dzięki JustZix możesz przypiąć regułę CSS do dowolnego adresu URL i wymusić tryb ciemny, który podąża za tobą wszędzie. Oto przepisy, których faktycznie używam.

Najszybszy tryb ciemny: odwróć stronę

Najszybsza sztuczka to odwrócenie całego dokumentu i obrócenie odcienia z powrotem, aby kolory pozostały mniej więcej poprawne. Zdjęcia i filmy również zostają odwrócone, więc obracamy je z powrotem po raz drugi.

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

To jednolinijkowe zwycięstwo. Nie jest idealne — cienie wyglądają dziwnie, a kolory marki się przesuwają — ale na szybką sesję czytania jest nie do pobicia. Utwórz regułę CSS JustZix, dopasuj ją do żądanej domeny, wklej, gotowe.

Czystszy natywny tryb ciemny

Dla stron, które odwiedzasz codziennie, ręcznie dostrojony motyw bije odwracanie. Zamiast odwracać, przemalowujesz tła i tekst bezpośrednio. To zachowuje obrazy i kolory akcentów nietknięte.

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

Selektory są celowo szerokie. Rzadko będziesz musiał być precyzyjny — większość układów używa garstki strukturalnych znaczników i ogólnych nazw klas. Dostrój zmienne raz, a cała strona za tym podąży.

Napraw jasne pozostałości

Po bazowym motywie kilka elementów pozostaje białych: pola formularzy, bloki kodu, tabele. Zgarnij je jedną regułą.

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

Tylko nocą

Jeśli chcesz trybu ciemnego tylko po zachodzie słońca, owiń regułę w zapytanie media, aby uszanowała harmonogram twojego systemu operacyjnego.

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

Wskazówki oszczędzające czas

• Zawsze dodawaj !important — arkusze stylów strony ładują się po twoich i nadpiszą zwykłe reguły.
• Zacznij od sztuczki z odwracaniem, potem przejdź do natywnego motywu dla swoich pięciu najważniejszych stron.
• Trzymaj wspólny blok zmiennych :root, aby każda strona używała tej samej palety.
• Przetestuj paski przewijania i kolory zaznaczenia — łatwo o nich zapomnieć, a psują nastrój.

Chcesz więcej punktów wyjścia? Przejrzyj nasze gotowe przykłady lub przeczytaj towarzyszący tekst o własnych kolorach akcentu. Nowy tutaj? Pobierz JustZix i wklej pierwszą regułę w niecałą minutę.