Improving Scrollbar Appearance with CSS

A few days ago I reposted a tweet with a tiny little snippet that makes the scrollbar much more pleasant-looking (image taken directly from the tweet above):

Of course, I implemented this on my blog with a single change: setting the scrollbar color to follow the color token of my Tailwind CSS custom theme:

@layer base {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent; # --color-border is the CSS variable that holds the color I want for my scrollbar
  }
}

I saw on MDN that there might be a few accessibility concerns when you set the scrollbar to be thin. If this causes you too much trouble using this blog, please open an issue or submit a PR on this blog's repository (it's open source, after all).