Home / Snippets / Color & Theming /

Dark mode scrollbar

A capped-height panel with a long changelog-style list — scrollbar-width plus WebKit pseudo-elements for Chrome/Edge/Safari.

  1. v2.4 — Container queries in sidebar
  2. v2.3 — OKLCH token migration
  3. v2.2 — Focus-visible audit
  4. v2.1 — Reduced-motion paths
  5. v2.0 — Dark theme default
  6. v1.9 — Typography scale
  7. v1.8 — Initial release
Widely Supported
colorno-js

Quick implementation

.dmsb-scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.45 0.06 265) oklch(0.2 0.03 265);
}
.dmsb-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, oklch(0.48 0.08 265), oklch(0.38 0.08 265));
}

Prompt this to your LLM

Overlay scrollbars and Linux GTK.

You are theming scrollbars inside a dark scroll panel.

Goal: max-height + overflow-y auto; styled thumb/track for WebKit and scrollbar-color for Firefox.

Technical constraints:
- Keep thumb contrast against track; avoid 1px thumbs (touch targets).
- Document that macOS may overlay scrollbars until scroll — behavior is OS-level.

Return HTML + CSS.

Why this matters in 2026

Default light-gray scrollbars clash with charcoal panels; a few lines make logs and sidebars feel native.

The logic

Firefox reads scrollbar-color; WebKit needs pseudo-elements. Both can share the same chroma from your token ramp.

Accessibility & performance

Scrollable regions should be keyboard-focusable when appropriate; tabindex="0" here is optional for roving focus in apps.