[RFC] Should we handle dark mode scrollbar?

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

The default style of the scrollbar doesn’t play well with a dark mode. The surface is too white, it draws more attention than it needs to:

Windows

macOS

On the other hand, there are ways to work around the issue. For instance, we can use StackOverflow’s sources as a starting point. It’s the CSS they use for displaying all the code in the pages (even in light mode).

A quick diff:

diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js
index 72187760ba..f73b994ba1 100644
--- a/packages/material-ui/src/CssBaseline/CssBaseline.js
+++ b/packages/material-ui/src/CssBaseline/CssBaseline.js
@@ -23,6 +23,11 @@ export const body = (theme) => ({
   },
 });

+// Values coming from mac OS.
+const track = '#202022';
+const thumb = '#585859';
+const active = '#838384';
+
 export const styles = (theme) => ({
   '@global': {
     html,
@@ -32,6 +37,27 @@ export const styles = (theme) => ({
     'strong, b': {
       fontWeight: theme.typography.fontWeightBold,
     },
+    ...(theme.palette.type === 'dark' ? {
+      scrollbarColor: `${thumb} ${track}`,
+      '*::-webkit-scrollbar': {
+        backgroundColor: track,
+      },
+      '*::-webkit-scrollbar-thumb': {
+        borderRadius: 8,
+        backgroundColor: thumb,
+        minHeight: 24,
+        border: `3px solid ${track}`,
+      },
+      '*::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: active,
+      },
+      '*::-webkit-scrollbar-thumb:active': {
+        backgroundColor: active,
+      },
+      '*::-webkit-scrollbar-corner': {
+        backgroundColor: track,
+      },
+    } : {}),
     body: {
       margin: 0, // Remove the margin in all browsers.
       ...body(theme),

Which turns into:

We first explored this direction in https://github.com/mui-org/material-ui-x/pull/282.

Should we bundle the style in the CssBasline component? Any potential downsides?

[eps1lon]

I thought this was a custom scrollbar implementation.

@eps1lon I think you can follow #21641 for this one.

I vastly prefer native scrollbars. Scrolling is one of those things that need the absolute best performance. And a general purpose React component can’t fit into that.

I would support this feature only if it uses native scrollbars. Though we should be a bit more diligent and explore standardized properties.

[mmmols]

Since @Avi98 haven’t responded, I will make a PR if that’s cool