Additionally, Chakra UI has support for color modes (light and dark), allowing you to dynamically adjust the color of components based on the user's color scheme preference. This is controlled by the useColorMode hook and the ColorModeProvider component, and you can use the colorScheme prop in many components to automatically adjust their color based on the current color mode.
Top import the Box and Textcomponents used below:
In this example, teal.500 is a color from the Chakra UI color palette, and it applies to the Box's background.
This is some text with a color of teal.500
Here, teal.500 is applied as the text color.
In this example, the text color will be teal.500 on mobile devices, green.500 on tablet devices, and blue.500 on desktop devices.
Did you know?
Creative Idea No. 1
Creative Idea No. 2
I am using ColorScheme!
Creative Idea No. 3