Skip to main content

Dark mode scroll bars

Align scroll bars with the current color scheme

Aug 2022


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.