feat(ScrollBar): ✨ support dark mode by js

Author: afc163

src/ScrollBar.tsx

@@ -3,6 +3,8 @@ import raf from 'rc-util/lib/raf';
 import * as React from 'react';
 import { getPageXY } from './hooks/useScrollDrag';
 
+const isDark = () => window.matchMedia?.('(prefers-color-scheme: dark)').matches;
+
 export type ScrollBarDirectionType = 'ltr' | 'rtl';
 
 export interface ScrollBarProps {
@@ -45,6 +47,7 @@ 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(isDark());
 
   const isLTR = !rtl;
 
@@ -187,6 +190,20 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
     }
   }, [dragging]);
 
+  React.useEffect(() => {
+    const media = window.matchMedia?.('(prefers-color-scheme: dark)');
+
+    const listener = (e: MediaQueryListEvent) => {
+      setDark(e.matches);
+    };
+
+    media?.addEventListener('change', listener);
+
+    return () => {
+      media?.removeEventListener('change', listener);
+    };
+  }, []);
+
   React.useEffect(() => {
     delayHidden();
     return () => {
@@ -209,10 +226,11 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
 
   const thumbStyle: React.CSSProperties = {
     position: 'absolute',
-    background: 'rgba(0, 0, 0, 0.5)',
+    background: dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
     borderRadius: 99,
     cursor: 'pointer',
     userSelect: 'none',
+    ...propsThumbStyle,
   };
 
   if (horizontal) {
@@ -266,7 +284,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
         className={classNames(`${scrollbarPrefixCls}-thumb`, {
           [`${scrollbarPrefixCls}-thumb-moving`]: dragging,
         })}
-        style={{ ...thumbStyle, ...propsThumbStyle }}
+        style={{ ...thumbStyle }}
         onMouseDown={onThumbMouseDown}
       />
     </div>