Now that you understand how to use Chakra UI theming API. Let's take a step further and see if we can adapt a component to color mode.
When defining the styles for the
variants, you can either pass a
style object or a function that returns a style object.
For a single part component like button, badge, etc. The style configuration has the following signature:
For example, to create a simple badge that changes its background based on color mode. Here's how to go about it.
When it comes to multipart components for example tabs or menus etc, that have multiple sub-parts, you can also style them based on the color mode. Here's the signature: