fix: change divider bg

Author: ankit-tailor

example/storybook/stories/components/composites/Divider/Basic.tsx

@@ -8,7 +8,11 @@ export const Example = () => {
         <Heading mx="3" alignItems="center" flexDirection="row">
           Chrome
         </Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Heading mx="3" alignItems="center" flexDirection="row">
           Firefox
         </Heading>

example/storybook/stories/components/composites/Divider/Orientation.tsx

@@ -6,10 +6,19 @@ export const Example = () => {
     <Box alignItems="center">
       <Box w="160">
         <Heading mx="auto">Shoes</Heading>
-        <Divider my="2" />
+        <Divider
+          my="2"
+          _light={{ bg: 'muted.800' }}
+          _dark={{ bg: 'muted.50' }}
+        />
         <Flex mx="3" direction="row" justify="space-evenly" h="60">
           <Heading py="2">Girls</Heading>
-          <Divider orientation="vertical" mx="3" />
+          <Divider
+            orientation="vertical"
+            mx="3"
+            _light={{ bg: 'muted.800' }}
+            _dark={{ bg: 'muted.50' }}
+          />
           <Heading py="2">Boys</Heading>
         </Flex>
       </Box>