I’m styling a web page that has to work across all modern commercial devices and I’m amazed about how hard this single problem is. My page and most of the elements within it have a white background, therefore, when viewed on iPhone with dark mode enabled the scrollbar is entirely not visible, as it is composed of only a white thumb. The page scrollbar is actually correctly dark, but I have some divs and fields that can be scrolled where it stays white no matter the text or background color.

Unfortunately, for accessibility, organizational and aesthetic reasons, I can’t change the theme palette on the page, but this issue may be confusing for the user. Any suggestions?

What I’ve tried with no improvements:

• Setting the color scheme tag and color-scheme CSS property on :root to light or only light
• Setting the color or background-color properties on the -webkit-scrollbar selector to various values