Scrollbar styling (globally or util class)

[techniq]

We currently have (.scrollbar-none) to completely hide the scrollbar, but it would be nice to also have some better styling (possibly globally, but at least opt-in).

Styling the scrollbar is setting:

• ::-webkit-scrollbar
• ::-webkit-scrollbar-thumb
• ::-webkit-scrollbar-track

on Chrome/Safari, and

• scrollbar-color
• scrollbar-width

on Firefox.

See docs for reference and additional properties

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scrollbars_styling
• https://css-tricks.com/almanac/properties/s/scrollbar/

I have an old REPL that can also be used as reference.

.scrollContainer {
    scrollbar-color: var(--scrollcolor) var(--scrollbackground);
}
.scrollContainer::-webkit-scrollbar {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 1rem;
    background: var(--scrollbackground);
}

.scrollContainer::-webkit-scrollbar-thumb {
    border-radius: 1rem;
    background: var(--scrollcolor);
}

.scrollContainer::-webkit-scrollbar-track {
    border-radius: 1rem;
    background: var(--scrollbackground);
}

See also:

• https://scottspence.com/posts/change-scrollbar-color-tailwind-css
• https://github.com/adoxography/tailwind-scrollbar
• Scrollbar styling: older browsers
  • Scrollbar styling: older browsers (show on hover only)
  • Scrollbar styling: scrollbar-width

[techniq]

Appears Skeleton sets this globally with CSS variables (and I've been working on #66 and determining which variables to expose), so this will be helpful for reference.

Would like to see if others do this globally (it didn't appear shadcn/ui does, but that's not surprising based on how they implement things).