style: dark theme for scroller

2025-04-28 10:05:06 +08:00
parent ce9c31f368
commit 60d0750695
39 changed files with 216 additions and 148 deletions
@@ -0,0 +1,46 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import React from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  .simplebar-scrollbar::before {
+    width: var(--scrollbar-size);
+    background: var(--scrollbar-handle-bg);
+  }
+  &.dark {
+    .simplebar-scrollbar::before {
+      width: var(--scrollbar-size);
+      background: var(--scrollbar-handle-light-bg);
+    }
+  }
+`;
+
+interface SimpleOverlayProps {
+  height?: string | number;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+}
+
+const SimpleOverlay: React.FC<SimpleOverlayProps> = ({
+  height,
+  children,
+  style
+}) => {
+  const { isDarkTheme } = useUserSettings();
+  return (
+    <Wrapper className={isDarkTheme ? 'dark' : 'light'}>
+      <SimpleBar
+        style={{
+          height: height,
+          ...style
+        }}
+      >
+        {children}
+      </SimpleBar>
+    </Wrapper>
+  );
+};
+
+export default SimpleOverlay;