在色彩計畫上，我們都透過 Semantic Tokens 去設定好元件在白天和深夜模式的顏色，
我們可以利用 Chakra UI 提供的 useColorMode 去更換顏色模式

const { toggleColorMode } = useColorMode()

<Button onClick={toggleColorMode}>
   變更顏色模式
</Button>

接著　colorMode　會顯示現在的模式

 <Button onClick={toggleColorMode}>
     切換成{colorMode === 'light' ? '深夜模式' : '白天模式'}
 </Button>

Charka UI 還有提供　useColorModeValue　讓我們可以除了在　style config 設定好兩模式的顏色，也可以在
component 完成設定。

const value = useColorModeValue(lightModeValue, darkModeValue)

function CardDemo() {
  const { toggleColorMode } = useColorMode()

  const bgColor = useColorModeValue('white', 'black.200')
  const color = useColorModeValue('gray.500', 'gray.100')

  return (
    <>
      <Flex mb={4} bg={bg} bgColor={bgColor}>
          <Text color={color}>鐵人賽　2022 </Text>
      </Flex>
    </>
  )
}

useSystemColorMode

又或是除了讓使用者可以去做切換外，我們也可以設計成是依照使用者當前系統的模式
這邊我可以透過 style config 去做設定

const customTheme = {
  useSystemColorMode: true, 
}

若我們希望指定預設不用使用者的系統設置則

const customTheme = {
  initialColorMode: 'dark',
  useSystemColorMode: true,
}