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 Preferences → General → Show 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.