fix(tables): Dark mode scrollbar styles for webkit (#35338)

superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx

@@ -30,6 +30,7 @@ import {
   UIEventHandler,
 } from 'react';
 import { TableInstance, Hooks } from 'react-table';
+import { useTheme, css } from '@superset-ui/core';
 import getScrollBarSize from '../utils/getScrollBarSize';
 import needScrollBar from '../utils/needScrollBar';
 import useMountedMemo from '../utils/useMountedMemo';
@@ -125,6 +126,8 @@ function StickyWrap({
   children: Table;
   sticky?: StickyState; // current sticky element sizes
 }) {
+  const theme = useTheme();
+
   if (!table || table.type !== 'table') {
     throw new Error('<StickyWrap> must have only one <table> element as child');
   }
@@ -221,6 +224,26 @@ function StickyWrap({
   let footerTable: ReactElement | undefined;
   let bodyTable: ReactElement | undefined;
 
+  const scrollBarStyles = css`
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-track {
+      background: ${theme.colorFillQuaternary};
+    }
+    &::-webkit-scrollbar-thumb {
+      background: ${theme.colorFillSecondary};
+      border-radius: ${theme.borderRadiusSM}px;
+      &:hover {
+        background: ${theme.colorFillTertiary};
+      }
+    }
+    &::-webkit-scrollbar-corner {
+      background: ${theme.colorFillQuaternary};
+    }
+  `;
+
   if (needSizer) {
     const theadWithRef = cloneElement(thead, { ref: theadRef });
     const tfootWithRef = tfoot && cloneElement(tfoot, { ref: tfootRef });
@@ -233,6 +256,7 @@ function StickyWrap({
           visibility: 'hidden',
           scrollbarGutter: 'stable',
         }}
+        css={scrollBarStyles}
         role="presentation"
       >
         {cloneElement(
@@ -316,6 +340,7 @@ function StickyWrap({
           overflow: 'auto',
           scrollbarGutter: 'stable',
         }}
+        css={scrollBarStyles}
         onScroll={sticky.hasHorizontalScroll ? onScroll : undefined}
         role="presentation"
       >