Skip to main content

Dark mode scroll bars

Align scroll bars with the current color scheme

I was recently building a web app and wanted to check that everything works with scroll bars always being visible. On macOS, I first went to PreferencesGeneralShow scroll bars and set it to Always. Everything looked good. But then I toggled dark mode on and noticed that the colour scheme of the scroll bars stayed light. I then benchmarked Github's website, and lo and behold: On their site, the scroll bar was dark on dark mode.

What was I missing?

It turned out the browser respects the color-scheme CSS property when defining the scroll bar's colour scheme. After some research, I figured out that I could define the schemes in my CSS like this:

:root {
  color-scheme: light dark;

Scroll bars now respect the user's colour scheme. I would assume this would become automatic in the future, but at least for now, this fix will do the trick.

Get in touch

I'm not currently looking for freelancer work, but if you want to have a chat, feel free to contact me.