← Wszystkie wpisy

Przewodniki

Własne paski przewijania i tryby wysokiego kontrastu w CSS

17 maja 2026 · autor JustZix Team

Wykończenia własnego motywu to części, o których ludzie zapominają: pasek przewijania, kontrast, opcja całkowitego pozbycia się koloru. Ten przewodnik zbiera reguły CSS JustZix, które dopracowują stronę w coś, czego naprawdę przyjemnie używać.

Wystylizuj pasek przewijania

Domyślny pasek przewijania może kłócić się ze starannie dostrojonym ciemnym motywem. Nowoczesne przeglądarki dają dwa sposoby na jego restylizację. Użyj obu dla pełnego pokrycia.

html {
  scrollbar-width: thin;
  scrollbar-color: #4b5263 #1f232a;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #1f232a;
}
::-webkit-scrollbar-thumb {
  background: #4b5263;
  border-radius: 8px;
  border: 3px solid #1f232a;
}
::-webkit-scrollbar-thumb:hover {
  background: #5c6370;
}

Właściwości scrollbar-width i scrollbar-color obejmują Firefoksa; pseudoelementy ::-webkit-scrollbar obejmują Chrome, Edge i Operę. Uwzględnienie obu oznacza, że twoja reguła wygląda dobrze w każdej obsługiwanej przez JustZix przeglądarce.

Prawdziwy tryb wysokiego kontrastu

Dla użytkowników słabowidzących lub po prostu czytania w jasnym pomieszczeniu surowy kontrast pomaga. Ten przepis wymusza niemal czarne tła, niemal biały tekst i mocny akcent.

html, body {
  background: #000 !important;
  color: #fff !important;
}
p, li, span, div, h1, h2, h3, h4, td, th {
  color: #fff !important;
}
a, a:visited {
  color: #ffe066 !important;
  text-decoration: underline !important;
}
button, .btn {
  background: #ffe066 !important;
  color: #000 !important;
  border: 2px solid #fff !important;
}

Żółty na czarnym to jedna z najwyżej kontrastujących par dostępnych i od dawna standard dostępności. Podkreślenie linków gwarantuje, że da się je odróżnić bez polegania na kolorze.

Zwiększ kontrast bez przekolorowania

Jeśli lubisz paletę strony, ale wydaje się wyblakła, zwiększ kontrast filtrem zamiast przemalowywać wszystko.

html {
  filter: contrast(1.15) brightness(0.97);
}

To jedna linia i jest odwracalne — wyłącz regułę JustZix, a strona wraca do normy. Trzymaj wartości łagodne; cokolwiek powyżej 1,3 zaczyna zgniatać szczegóły.

Tryby skali szarości i ograniczonego koloru

Kolor potrafi rozpraszać. Reguła skali szarości całkowicie go usuwa, co jest świetne dla skupienia lub przeglądania układu bez uprzedzeń kolorystycznych.

html {
  filter: grayscale(1);
}

Wolisz zachować obrazy w kolorze, ale wyciszyć interfejs? Zastosuj skalę szarości do wszystkiego, a potem przywróć media.

html {
  filter: grayscale(0.85);
}
img, video, picture, canvas {
  filter: grayscale(0);
}

Uszanuj preferencje ruchu

Kompletny motyw dostępności uspokaja też animacje. Ta reguła zabija rozpraszający ruch dla każdego, kto poprosił swój system o jego ograniczenie.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

Składanie tego razem

• Zawsze parami stosuj właściwości paska przewijania Webkit i Firefox, aby reguła była międzyprzeglądarkowa.
• Kontrast i skala szarości oparte na filtrach to jednolinijkowce i są w pełni odwracalne — idealne do szybkiego przełączania.
• Dla poważnej dostępności przemaluj prawdziwymi kolorami zamiast filtrów; podkreślaj linki.
• Zapisz każdy tryb jako osobną regułę JustZix i włączaj tę, która pasuje do chwili.

To naturalnie łączy się z uniwersalnym trybem ciemnym i ustawieniami wygodnego czytania. Znajdź więcej gotowych przepisów w naszych gotowych przykładach lub pobierz JustZix i zacznij stylizować internet po swojemu.