Material-ui: [RFC] Should we handle dark mode scrollbar?

[oliviertassinari]

• [x] 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. It's a bit unfortunate that these aren't standardized so we could leverage CSS postprocessors (jss or postcss).

Is https://drafts.csswg.org/css-scrollbars-1/ sufficient to get better scrollbar colors? Hopefully the mentioned CSS postprocessors add vendor prefixes.

[oliviertassinari]

@eps1lon https://drafts.csswg.org/css-scrollbars-1/ would solve the issue, it's what the above diff uses for Firefox. However, no browsers support the "dark" value yet. Also, the specification seems to have ignored the customization of the "active" and "hover" color states.

[eps1lon]

Also, the specification seems to have ignored the customization of the "active" and "hover" color states.

They adress this pretty clearly:

Pseudo-elements for selecting specific parts of a scrollbar are out of scope. The WebKit implementation of pseudo-elements for scrollbar is considered to be a feature mistakenly exposed to the web. Main concerns against the pseudo-elements approach are:

Operating systems continuously evolve their scrollbar designs to provide better user experience, beyond the ability of any set of pseudo-elements to accurately model this over time.
Different platforms have different scrollbar structure means testing interop is harder, because authors would need to take not only engine but also platforms into account.

[oliviertassinari]

I thought this was a custom scrollbar implementation.

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

[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.

[oliviertassinari]

I think that it's worth trying by moving the logic to CssBasline. Worst case, we will need to revert, but will have learned something about it. Best case, we will have improved dark mode support, leveraging macOS colors :).

[yordis]

Please do!

I actually have to do this every time per project LOL

[oliviertassinari]

It's up for grabs.

[Avi98]

Hi @oliviertassinari @eps1lon, can I work on this?

[yordis]

@Avi98 please do, would be amazing if you contribute to the code base. 🚀

[mmmols]

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