A thumb and nothing else, in the theme's colours. Opt in for the page or for one block.
No track, no arrows, no corner box. Scrolling, keyboard and touch stay native: only the paint changes.
Loading the theme emits no scrollbar rule. Include the mixin where you want one.
At the stylesheet root it covers the whole page. The rules sit at zero specificity, so any rule of yours wins.
// styles.scss
@use 'ngwr/theme' as wr;
@include wr.scrollbar;Inside a rule it styles that element's own scrollbars only.
@use 'ngwr/theme' as wr;
.panel {
max-height: 20rem;
overflow: auto;
@include wr.scrollbar;
}wr-virtual-scroll and wr-marquee include it on their own viewport, so they look the same without the page-wide opt-in.
Declared on :root by the theme.
| Token | Default | Use |
|---|---|---|
--wr-scrollbar-size | 0.625rem | Width of a vertical bar, height of a horizontal one |
--wr-scrollbar-thumb | color-mix(in srgb, var(--wr-color-on-surface) 20%, transparent) | The thumb at rest |
--wr-scrollbar-thumb-hover | color-mix(in srgb, var(--wr-color-on-surface) 35%, transparent) | The thumb under the pointer |
A colour that differs between light and dark is one light-dark() value.
:root {
--wr-scrollbar-thumb: light-dark(rgb(0 0 0 / 25%), rgb(255 255 255 / 30%));
--wr-scrollbar-thumb-hover: light-dark(rgb(0 0 0 / 45%), rgb(255 255 255 / 50%));
}| Where | What happens |
|---|---|
| Firefox | Draws its own thin scrollbar in the thumb colour. No exact width. |
| macOS overlay scrollbars | Show only while scrolling, unless the system setting is "Always". |
| Forced colors | Keep the system scrollbar. |