[theme] Improve darkScrollbar helper

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

This is just an idea, but I think we should not set the scrollbar colors “arbitrarily” but rather via the theme. That way the colors have a connection to the used theme.

Examples 🌈

I was trying out something like this: https://github.com/Primajin/material-ui/commit/adb389074887567832a46d7f36f613ec61ec6736 this for sure needs more tweaking but it should convey the idea.

We use custom scrollbars with Material UI 4 both for dark and light - so for 5 it would be good if the scrollbars respect the theme.

Motivation 🔦

For example we use a different paper and background color in dark mode than the default theme. The scrollbars should match the paper color (or something from background) so that it fit’s with the overall design.

[oliviertassinari]

It looks great 🙏

[m4theushw]

From https://html.spec.whatwg.org/multipage/semantics.html#meta-color-scheme:

To aid user agents in rendering the page background with the desired color scheme immediately (rather than waiting for all CSS in the page to load), a ‘color-scheme’ value can be provided in a meta element.

The page is painted after the stylesheet is loaded, but the background comes first. Maybe we add the meta tag only in the docs to not flicker between the white background and the dark one.