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 a component 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.

Single Part Component#

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.

Multipart or Composite Component#

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:

Edit this page