overflow

scrollbar-color

Themes a scroll container's scrollbar via the standard scrollbar-color property, supported by Firefox and modern Chromium alike through plain CSS.

import { scrollbarColor } from "@sdxc/u/overflow";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.scrollbarColor()`	`css({ scrollbarColor: "auto" })`
`u.scrollbarColor("neutral")`	`css({ scrollbarColor: "var(--ui-neutral-border) transparent" })`
`u.scrollbarColor("brand.strong", "neutral")`	`css({ scrollbarColor: "var(--ui-brand-border-strong) var(--ui-neutral-bg-tint)" })`
`u.scrollbarColor("color.neutral.400", "color.neutral.100")`	`css({ scrollbarColor: "var(--ui-color-neutral-400) var(--ui-color-neutral-100)" })`

Every scale argument also takes a raw CSS value, which passes through untouched.

u.scrollbarColor()

Wrap the call in a state utility to scope it to one selector.

u.hover(u.scrollbarColor())

Wrap the call in a container query to scope it to one width.

u.at("md", u.scrollbarColor())

The custom properties this utility reads, which a theme redefines.

u.scrollbarColor(thumb?: ColorValue | (string & {}), track?: ColorValue | (string & {}))