← All posts

Guides

Custom scrollbars and high-contrast modes with CSS

17 May 2026 · by JustZix Team

The finishing touches of a custom theme are the parts people forget: the scrollbar, the contrast, the option to drain color entirely. This guide collects the JustZix CSS rules that polish a site into something you genuinely enjoy using.

Style the scrollbar

A default scrollbar can clash with a carefully tuned dark theme. Modern browsers give you two ways to restyle it. Use both for full coverage.

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

The scrollbar-width and scrollbar-color properties cover Firefox; the ::-webkit-scrollbar pseudo-elements cover Chrome, Edge and Opera. Including both means your rule looks right in every JustZix-supported browser.

A true high-contrast mode

For low-vision users, or just bright-room reading, raw contrast helps. This recipe forces near-black backgrounds, near-white text and a bold accent.

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

Yellow on black is one of the highest-contrast pairings available and is a long-standing accessibility default. Underlining links guarantees they are distinguishable without relying on color.

Boost contrast without recoloring

If you like the site palette but it feels washed out, push contrast with a filter instead of repainting everything.

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

This is a single line and reversible — toggle the JustZix rule off and the page returns to normal. Keep the values gentle; anything above 1.3 starts to crush detail.

Grayscale and reduced-color modes

Color can be distracting. A grayscale rule strips it entirely, which is great for focus or for reviewing layout without color bias.

html {
  filter: grayscale(1);
}

Prefer to keep images in color but mute the interface? Apply grayscale to everything, then restore media.

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

Respect motion preferences

A complete accessibility theme also calms animation. This rule kills distracting motion for anyone who has asked their system to reduce it.

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

Putting it together

• Always pair Webkit and Firefox scrollbar properties so the rule is cross-browser.
• Filter-based contrast and grayscale are one-liners and fully reversible — ideal for quick toggling.
• For serious accessibility, repaint with real colors rather than filters; underline links.
• Save each mode as its own JustZix rule and enable whichever fits the moment.

This pairs naturally with a universal dark mode and comfortable reading settings. Find more drop-in recipes in our ready-made examples, or download JustZix and start theming the web your way.