Fixing Scrollbar Color in Dark Mode

I’ve you’ve ever implemented dark mode on a website, you probably have experienced that painful moment when you realize that your lovely dark themed site has an ugly white scrollbar. Thankfully, this is fixed very simply using color-scheme.

The CSS color-scheme property instructs the browser what color schemes are allowed for the given element which then affects default styling of various elements such as form controls, scrollbars, and default colors.

While this property can be applied for individual elements, when implementing dark mode, it’s quite common to set this property on the root. Given that it’s an inherited property, it will apply to the entire page when you use this technique.

:root {
  color-scheme: dark;
}

That’s it! Your scrollbars will be properly dark themed along with your site!