Discussion on: How to Create Modern Cards in Chakra UI & React JS ⚡️

Looking good, @fredy! Hint: instead of using the useColorModeValue you can use the _dark pseudo prop. That'll clean up your code.

Example:

// remove the hook
// const boxBg = useColorModeValue("white !important", "#111c44 !important");
...
<Flex
   borderRadius='20px'
   bg="white"
   _dark={{
      bg: "#111c44",
   }}
   ...
>
...

Also, take a look at the Semantic Tokens feature! You can make a token from your "#111c44", and reuse it throughout your app.

You can add your article on our Resources Page. Just open a PR that adds your article in the configs/resources.json file.