Skip to Content

Advanced Theming

Now that you understand how to use Chakra UI theming API. Let's take a step further and see if we can adapt the button to color mode.

When defining the styles for the sizes or variants, you can either pass a style object or a function that returns a style object.

Using color mode#

Here's an example of how to create a simple badge that changes its background based on color mode.

Edit this page