fix(BottomSheet): change bottom sheet handle color on dark mode

gitsindonesia · Feb 7, 2023 · 0aea41e · 0aea41e
1 parent a87a1a7
commit 0aea41e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/bottom-sheets/src/BottomSheet.dark.scss b/packages/bottom-sheets/src/BottomSheet.dark.scss
@@ -3,6 +3,9 @@
     --v-bottom-sheet-bg-color: theme('colors.neutral.900');
     --v-bottom-sheet-body-color: theme('colors.neutral.200');
 
+    // handle
+    --v-bottom-sheet-handle-bg-color: theme('colors.neutral.600');
+
     &-close-icon {
       @apply text-neutral-300 hover:text-neutral-100;
     }

diff --git a/packages/bottom-sheets/src/BottomSheet.stories.ts b/packages/bottom-sheets/src/BottomSheet.stories.ts
@@ -284,7 +284,7 @@ export const NestedSheet: Story = (args, {argTypes}) => ({
 });
 
 export const DarkMode: Story = (args, {argTypes}) => ({
-  components: {BottomSheet, BottomSheetBody, BottomSheetHeader, Button},
+  components: {BottomSheet, BottomSheetHandle, BottomSheetBody, BottomSheetHeader, Button},
   setup() {
     const isOpen = ref(false);
     onMounted(() => {
@@ -296,6 +296,7 @@ export const DarkMode: Story = (args, {argTypes}) => ({
   <div class="dark:bg-neutral-900 dark:text-neutral-200 p-6">
     <Button @click="isOpen = !isOpen">Open BottomSheet</Button>
     <BottomSheet v-model="isOpen" v-bind="args">
+      <BottomSheetHandle />
       <BottomSheetHeader>Sheet Title</BottomSheetHeader>
       <BottomSheetBody>
         A quick brown fox leaps over the lazy dog.