feat: Add dark mode support for cards

Author: franky47

pages/index.mdx

@@ -5,3 +5,7 @@ import { Container, StackCard } from '../src'
 export default ({ children }) => <Container my={8}>{children}</Container>
 
 Foo
+
+<StackCard>
+  <Text>Bar</Text>
+</StackCard>

src/components/cards.tsx

@@ -1,35 +1,47 @@
 import React from 'react'
-import Box, { BoxProps } from '@chakra-ui/core/dist/Box'
+import PseudoBox, { PseudoBoxProps } from '@chakra-ui/core/dist/PseudoBox'
 import Flex, { FlexProps } from '@chakra-ui/core/dist/Flex'
 import Stack, { StackProps } from '@chakra-ui/core/dist/Stack'
+import { useColorMode } from '@chakra-ui/core/dist/ColorModeProvider'
 
 // --
 
-const baseProps: BoxProps = {
+export const cardBackgroundColors = {
+  light: 'white',
+  dark: 'gray.900',
+}
+
+export const cardProps: PseudoBoxProps = {
   p: 4,
   borderRadius: 4,
-  bg: 'white',
   shadow: 'md',
 }
 
-export interface CardProps extends BoxProps {}
+export interface CardProps extends PseudoBoxProps {}
 
 export const Card: React.FC<CardProps> = ({ ...props }) => {
-  return <Box {...baseProps} {...props} />
+  const { colorMode } = useColorMode()
+  return (
+    <PseudoBox {...cardProps} bg={cardBackgroundColors[colorMode]} {...props} />
+  )
 }
 
 // --
 
 export interface FlexCardProps extends FlexProps {}
 
 export const FlexCard: React.FC<FlexCardProps> = ({ ...props }) => {
-  return <Flex {...baseProps} {...props} />
+  const { colorMode } = useColorMode()
+  return <Flex {...cardProps} bg={cardBackgroundColors[colorMode]} {...props} />
 }
 
 // --
 
 export interface StackCardProps extends StackProps {}
 
 export const StackCard: React.FC<StackCardProps> = ({ ...props }) => {
-  return <Stack {...baseProps} {...props} />
+  const { colorMode } = useColorMode()
+  return (
+    <Stack {...cardProps} bg={cardBackgroundColors[colorMode]} {...props} />
+  )
 }

src/pages/_app.tsx

@@ -17,8 +17,8 @@ const defaultGetGlobalConfig: GetGlobalConfig = (theme) => ({
   },
   dark: {
     color: theme.colors.gray[400],
-    bg: theme.colors.gray[800],
-    borderColor: theme.colors.whiteAlpha[300],
+    bg: '#0f141c', // theme.colors.gray[900],
+    borderColor: theme.colors.gray[800],
     placeholderColor: theme.colors.gray[600],
   },
 })