Skip to content

Commit 2758938

Browse files
authored
feat(ScrollBar): 💄 use CSS variable for scrollbar color (#323)
1 parent 28a6416 commit 2758938

File tree

4 files changed

+26
-167
lines changed

4 files changed

+26
-167
lines changed

jest.config.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

src/ScrollBar.tsx

Lines changed: 26 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
4545
const [dragging, setDragging] = React.useState(false);
4646
const [pageXY, setPageXY] = React.useState<number | null>(null);
4747
const [startTop, setStartTop] = React.useState<number | null>(null);
48-
const [dark, setDark] = React.useState(false);
4948

5049
const isLTR = !rtl;
5150

@@ -188,21 +187,6 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
188187
}
189188
}, [dragging]);
190189

191-
React.useEffect(() => {
192-
const media = window.matchMedia?.('(prefers-color-scheme: dark)');
193-
setDark(media.matches);
194-
195-
const listener = (e: MediaQueryListEvent) => {
196-
setDark(e.matches);
197-
};
198-
199-
media?.addEventListener('change', listener);
200-
201-
return () => {
202-
media?.removeEventListener('change', listener);
203-
};
204-
}, []);
205-
206190
React.useEffect(() => {
207191
delayHidden();
208192
return () => {
@@ -225,45 +209,38 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
225209

226210
const thumbStyle: React.CSSProperties = {
227211
position: 'absolute',
228-
background: dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.5)',
229212
borderRadius: 99,
213+
background: 'var(--rc-virtual-list-scrollbar-bg, rgba(0, 0, 0, 0.5))',
230214
cursor: 'pointer',
231215
userSelect: 'none',
232-
...propsThumbStyle,
233216
};
234217

235218
if (horizontal) {
236-
// Container
237-
containerStyle.height = 8;
238-
containerStyle.left = 0;
239-
containerStyle.right = 0;
240-
containerStyle.bottom = 0;
241-
242-
// Thumb
243-
thumbStyle.height = '100%';
244-
thumbStyle.width = spinSize;
245-
246-
if (isLTR) {
247-
thumbStyle.left = top;
248-
} else {
249-
thumbStyle.right = top;
250-
}
219+
Object.assign(containerStyle, {
220+
height: 8,
221+
left: 0,
222+
right: 0,
223+
bottom: 0,
224+
});
225+
226+
Object.assign(thumbStyle, {
227+
height: '100%',
228+
width: spinSize,
229+
[isLTR ? 'left' : 'right']: top,
230+
});
251231
} else {
252-
// Container
253-
containerStyle.width = 8;
254-
containerStyle.top = 0;
255-
containerStyle.bottom = 0;
256-
257-
if (isLTR) {
258-
containerStyle.right = 0;
259-
} else {
260-
containerStyle.left = 0;
261-
}
262-
263-
// Thumb
264-
thumbStyle.width = '100%';
265-
thumbStyle.height = spinSize;
266-
thumbStyle.top = top;
232+
Object.assign(containerStyle, {
233+
width: 8,
234+
top: 0,
235+
bottom: 0,
236+
[isLTR ? 'right' : 'left']: 0,
237+
});
238+
239+
Object.assign(thumbStyle, {
240+
width: '100%',
241+
height: spinSize,
242+
top,
243+
});
267244
}
268245

269246
return (
@@ -283,7 +260,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
283260
className={classNames(`${scrollbarPrefixCls}-thumb`, {
284261
[`${scrollbarPrefixCls}-thumb-moving`]: dragging,
285262
})}
286-
style={{ ...thumbStyle }}
263+
style={{ ...thumbStyle, ...propsThumbStyle }}
287264
onMouseDown={onThumbMouseDown}
288265
/>
289266
</div>

tests/dark.test.js

Lines changed: 0 additions & 101 deletions
This file was deleted.

tests/setup.js

Lines changed: 0 additions & 13 deletions
This file was deleted.

0 commit comments

Comments
 (0)