feat(ScrollBar): ✨ support dark mode (#312)

Author: afc163

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  setupFiles: ['./tests/setup.js'],
+  snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
+};

src/ScrollBar.tsx

@@ -45,6 +45,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(false);
 
   const isLTR = !rtl;
 
@@ -187,6 +188,21 @@ 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 () => {
@@ -209,10 +225,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 +283,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>

tests/dark.test.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import List from '../src';
+
+describe('List.dark', () => {
+  const originalMatchMedia = window.matchMedia;
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia;
+  });
+
+  const mockMatchMedia = (matches) => {
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+  };
+
+  it('should render dark scrollbar', () => {
+    mockMatchMedia(true);
+
+    const wrapper = mount(
+      <List data={[1, 2, 3]} height={10} itemHeight={5} itemKey={(item) => item}>
+        {(item) => <div>{item}</div>}
+      </List>
+    );
+
+    const thumb = wrapper.find('.rc-virtual-list-scrollbar-thumb');
+    expect(thumb.props().style.background).toBe('rgba(255, 255, 255, 0.5)');
+  });
+
+  it('should render light scrollbar', () => {
+    mockMatchMedia(false);
+
+    const wrapper = mount(
+      <List data={[1, 2, 3]} height={10} itemHeight={5} itemKey={(item) => item}>
+        {(item) => <div>{item}</div>}
+      </List>
+    );
+
+    const thumb = wrapper.find('.rc-virtual-list-scrollbar-thumb');
+    expect(thumb.props().style.background).toBe('rgba(0, 0, 0, 0.5)');
+  });
+
+  it('should update on theme change', () => {
+    let listener;
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: false,
+        addEventListener: (type, cb) => {
+          if (type === 'change') {
+            listener = cb;
+          }
+        },
+        removeEventListener: () => {},
+      })),
+    });
+
+    const wrapper = mount(
+      <List data={[1, 2, 3]} height={10} itemHeight={5} itemKey={(item) => item}>
+        {(item) => <div>{item}</div>}
+      </List>
+    );
+
+    // Initial: light
+    expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.background).toBe(
+      'rgba(0, 0, 0, 0.5)',
+    );
+
+    // Change to dark
+    act(() => {
+      listener({ matches: true });
+    });
+    wrapper.update();
+
+    expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.background).toBe(
+      'rgba(255, 255, 255, 0.5)',
+    );
+
+    // Change back to light
+    act(() => {
+      listener({ matches: false });
+    });
+    wrapper.update();
+
+    expect(wrapper.find('.rc-virtual-list-scrollbar-thumb').props().style.background).toBe(
+      'rgba(0, 0, 0, 0.5)',
+    );
+  });
+}); 

tests/setup.js

@@ -0,0 +1,13 @@
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});