feat(ScrollBar): 💄 use CSS variable for scrollbar color (#323)

Author: afc163

jest.config.js

@@ -45,7 +45,6 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   const [dragging, setDragging] = React.useState(false);
   const [pageXY, setPageXY] = React.useState<number | null>(null);
   const [startTop, setStartTop] = React.useState<number | null>(null);
-  const [dark, setDark] = React.useState(false);
 
   const isLTR = !rtl;
 
@@ -188,21 +187,6 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
     }
   }, [dragging]);
 
-  React.useEffect(() => {
-    const media = window.matchMedia?.('(prefers-color-scheme: dark)');
-    setDark(media.matches);
-
-    const listener = (e: MediaQueryListEvent) => {
-      setDark(e.matches);
-    };
-
-    media?.addEventListener('change', listener);
-
-    return () => {
-      media?.removeEventListener('change', listener);
-    };
-  }, []);
-
   React.useEffect(() => {
     delayHidden();
     return () => {
@@ -225,45 +209,38 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
 
   const thumbStyle: React.CSSProperties = {
     position: 'absolute',
-    background: dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
     borderRadius: 99,
+    background: 'var(--rc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))',
     cursor: 'pointer',
     userSelect: 'none',
-    ...propsThumbStyle,
   };
 
   if (horizontal) {
-    // Container
-    containerStyle.height = 8;
-    containerStyle.left = 0;
-    containerStyle.right = 0;
-    containerStyle.bottom = 0;
-
-    // Thumb
-    thumbStyle.height = '100%';
-    thumbStyle.width = spinSize;
-
-    if (isLTR) {
-      thumbStyle.left = top;
-    } else {
-      thumbStyle.right = top;
-    }
+    Object.assign(containerStyle, {
+      height: 8,
+      left: 0,
+      right: 0,
+      bottom: 0,
+    });
+  
+    Object.assign(thumbStyle, {
+      height: '100%',
+      width: spinSize,
+      [isLTR ? 'left' : 'right']: top,
+    });
   } else {
-    // Container
-    containerStyle.width = 8;
-    containerStyle.top = 0;
-    containerStyle.bottom = 0;
-
-    if (isLTR) {
-      containerStyle.right = 0;
-    } else {
-      containerStyle.left = 0;
-    }
-
-    // Thumb
-    thumbStyle.width = '100%';
-    thumbStyle.height = spinSize;
-    thumbStyle.top = top;
+    Object.assign(containerStyle, {
+      width: 8,
+      top: 0,
+      bottom: 0,
+      [isLTR ? 'right' : 'left']: 0,
+    });
+  
+    Object.assign(thumbStyle, {
+      width: '100%',
+      height: spinSize,
+      top,
+    });
   }
 
   return (
@@ -283,7 +260,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
         className={classNames(`${scrollbarPrefixCls}-thumb`, {
           [`${scrollbarPrefixCls}-thumb-moving`]: dragging,
         })}
-        style={{ ...thumbStyle }}
+        style={{ ...thumbStyle, ...propsThumbStyle }}
         onMouseDown={onThumbMouseDown}
       />
     </div>