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

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,11 +209,9 @@ 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,
     cursor: 'pointer',
     userSelect: 'none',
-    ...propsThumbStyle,
   };
 
   if (horizontal) {
@@ -269,21 +251,16 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   return (
     <div
       ref={scrollbarRef}
-      className={classNames(scrollbarPrefixCls, {
-        [`${scrollbarPrefixCls}-horizontal`]: horizontal,
-        [`${scrollbarPrefixCls}-vertical`]: !horizontal,
-        [`${scrollbarPrefixCls}-visible`]: visible,
-      })}
+      className={scrollbarPrefixCls}
       style={{ ...containerStyle, ...style }}
       onMouseDown={onContainerMouseDown}
-      onMouseMove={delayHidden}
     >
       <div
         ref={thumbRef}
         className={classNames(`${scrollbarPrefixCls}-thumb`, {
           [`${scrollbarPrefixCls}-thumb-moving`]: dragging,
         })}
-        style={{ ...thumbStyle }}
+        style={{ ...thumbStyle, ...propsThumbStyle }}
         onMouseDown={onThumbMouseDown}
       />
     </div>

src/ScrollBar.tsx

@@ -0,0 +1,14 @@
+.rc-virtual-list {
+  --rc-virtual-list-scrollbar-bg: rgba(0, 0, 0, 0.5);
+  --rc-virtual-list-scrollbar-bg-light: rgba(255, 255, 255, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+  .rc-virtual-list {
+    --rc-virtual-list-scrollbar-bg: var(--rc-virtual-list-scrollbar-bg-light);
+  }
+}
+
+.rc-virtual-list-scrollbar-thumb {
+  background: var(--rc-virtual-list-scrollbar-bg);
+} 

src/index.less

@@ -1,3 +1,4 @@
+import './index.less';
 import List from './List';
 
 export type { ListRef, ListProps } from './List';