fix: Fix scrollbar color issue

node-real · Oct 16, 2024 · 8c8c1f2 · 8c8c1f2
1 parent 4a64ffe
commit 8c8c1f2
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/.changeset/polite-onions-double.md b/.changeset/polite-onions-double.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Fix scrollbar color issue
diff --git a/packages/walletkit/src/core/base/components/Modal/index.tsx b/packages/walletkit/src/core/base/components/Modal/index.tsx
@@ -1,3 +1,4 @@
+import { useTheme } from '@/core/providers/ThemeProvider/context';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useResponsive } from '../../hooks/useResponsive';
 import { useScrollLock } from '../../hooks/useScrollLock';
@@ -40,11 +41,18 @@ export function Modal(props: ModalProps) {
   useScrollLock(isOpen);
 
   const { isMobileLayout } = useResponsive();
+  const { colorMode } = useTheme();
 
   return (
     <Portal>
       <Transition in={isOpen} variant="fade">
-        <Box className={cx('wk-modal', clsModal, className)} {...restProps}>
+        <Box
+          className={cx('wk-modal', clsModal, className)}
+          style={{
+            colorScheme: colorMode,
+          }}
+          {...restProps}
+        >
           <Box
             className={cx('wk-modal-overlay', clsModalOverlay)}
             onClick={() => closeOnOverlayClick && onClose()}

diff --git a/packages/walletkit/src/core/components/Content/styles.css.ts b/packages/walletkit/src/core/components/Content/styles.css.ts
@@ -7,4 +7,5 @@ export const clsContent = style({
   flexDirection: 'column',
   textAlign: 'center',
   gap: 8,
+  overflow: 'hidden',
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml