I think that .background.level2, .background.level1 are debt, we should remove them. The documentation using a different theme is a red-flag that the default values are wrong #22112.

On a different note. How about we add a logic to allow computing the other track and active values? It can save time.

diff --git a/packages/material-ui/src/darkScrollbar/index.ts b/packages/material-ui/src/darkScrollbar/index.ts
index af4a3ccc90..72a691c0a1 100644
--- a/packages/material-ui/src/darkScrollbar/index.ts
+++ b/packages/material-ui/src/darkScrollbar/index.ts
@@ -1,11 +1,31 @@
+import { lighten, darken, getLuminance, emphasize } from '@material-ui/core/styles';
+
 // track, thumb and active are derieved from macOS 10.15.7
 const scrollBar = {
-  track: '#2b2b2b',
   thumb: '#6b6b6b',
-  active: '#959595',
 };

-export default function darkScrollbar(options = scrollBar) {
+// Opposite of emphasize
+function diminish(color: string, coefficient = 0.15) {
+  return getLuminance(color) > 0.5 ? lighten(color, coefficient) : darken(color, coefficient);
+}
+
+interface Options {
+  track?: string;
+  thumb: string;
+  active?: string;
+}
+
+export default function darkScrollbar(options: Options = scrollBar) {
+  options = { ...options };
+
+  if (!options.track) {
+    options.track = diminish(options.thumb, 0.6);
+  }
+  if (!options.active) {
+    options.active = emphasize(options.thumb, 0.15);
+  }
+
   return {
     scrollbarColor: `${options.thumb} ${options.track}`,
     '&::-webkit-scrollbar, & *::-webkit-scrollbar': {

I have set the coefficients to reproduce the same outcome as before, using macOS default colors.

I also wonder if we should force a macOS~sy kind of style to the scrollbars or go the Github way of just changing the colors without the style of the OS.

Github on MacOS

Github on Windows

@Primajin The current output of darkScrollbar is not platform-dependent but it would probably be better. Is there a way to detect if we are on Windows/Linux?

in CSS not but in JS one could sniff the navigator or so. But maybe we can get around it by only applying (background-)colors and let the rest handle the OS. So we might want to remove the border radius and things like that.

I couldn't really figure out yet how Github does it here but I'm investigating.
I will play around how it will look like across platforms if we only tinker with the colors and share screenshots.

This one seems quite interesting approach - but maybe there is a shorter way than styling everything:
https://codepen.io/patrikx3/pen/ZEBQQyV

OK I got something working like this:

It has one small sniffer for adding a border-radius when it's on mac, otherwise the browser decides whether to show arrows or not.

What do you think?

It looks great 🙏