refactor: scrollbar style improvement

d3george · Dec 26, 2023 · c8930c4 · c8930c4
1 parent 5bea341
commit c8930c4
Showing 1 changed file with 29 additions and 4 deletions.
diff --git a/src/layouts/dashboard/index.tsx b/src/layouts/dashboard/index.tsx
@@ -1,5 +1,6 @@
 import { useScroll } from 'framer-motion';
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
 
 import { CircleLoading } from '@/components/loading';
 import ProgressBar from '@/components/progress-bar';
@@ -11,11 +12,11 @@ import Main from './main';
 import Nav from './nav';
 import NavHorizontal from './nav-horizontal';
 
-import { ThemeLayout } from '#/enum';
+import { ThemeLayout, ThemeMode } from '#/enum';
 
 function DashboardLayout() {
   const { colorBgElevated, colorTextBase } = useThemeToken();
-  const { themeLayout } = useSettings();
+  const { themeLayout, themeMode } = useSettings();
 
   const mainEl = useRef(null);
   const { scrollY } = useScroll({ container: mainEl });
@@ -58,7 +59,7 @@ function DashboardLayout() {
   const layout = themeLayout !== ThemeLayout.Horizontal ? verticalLayout : horizontalLayout;
 
   return (
-    <>
+    <StyleWrapper $themeMode={themeMode}>
       <ProgressBar />
 
       <div
@@ -72,7 +73,31 @@ function DashboardLayout() {
       >
         <Suspense fallback={<CircleLoading />}>{layout}</Suspense>
       </div>
-    </>
+    </StyleWrapper>
   );
 }
 export default DashboardLayout;
+
+const StyleWrapper = styled.div<{ $themeMode?: ThemeMode }>`
+  /* 设置滚动条的整体样式 */
+  ::-webkit-scrollbar {
+    width: 8px; /* 设置滚动条宽度 */
+  }
+
+  /* 设置滚动条轨道的样式 */
+  ::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#2c2c2c' : '#FAFAFA')};
+  }
+
+  /* 设置滚动条滑块的样式 */
+  ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#6b6b6b' : '#C1C1C1')};
+  }
+
+  /* 设置鼠标悬停在滚动条上的样式 */
+  ::-webkit-scrollbar-thumb:hover {
+    background: ${(props) => (props.$themeMode === ThemeMode.Dark ? '#939393' : '##7D7D7D')};
+  }
+`;