I have seen websites use the default scrollbar style and only change its colors through a dark/light mode button. For example, if you access tailwindcss.com or https://developer.mozilla.org/ in Chrome and Firefox(for comparison), you can see that a default scrollbar is applied, its style varies depending on which browser you’re using, and it change its colors through a dark/light button. You can notice that these websites all use the same colors for the arrow, track and thumb, so I imagine that it must be a built-in function.
I have tried changing its style with the simple ::webkit-scrollbar, track and thumb. But as you may know, it deletes the default scrollbar.
2
Answers
Have you tried ways described in this w3school tutorial? Here is the link: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
It worked in my case.
The ones that you see on https://developer.mozilla.org/ or https://tailwindcss.com/ are browser default ones for the dark css theme. That’s why they look identical, it’s not a custom scrollbar, just a default one for a particular browser.
It is controlled by
color-schemecss property, in that case it’scolor-scheme: dark;on the roothtmlelement. Be aware that this property also changes other things like text color, button colors and colors of other native elements. So if you only want to apply it for the scrollbar it would probably be better if you customize it manually with::webkit-scrollbaretc.