Chakra-UI

I♥️Components

Color

|

Chakra Docs

|

⦾ In Chakra UI, the design and styling of components are very flexible. You can control the color of your components (both background and text color) in a variety of ways. Chakra UI has a built-in theme object to specify color, and you can access color scales to apply a consistent design across your application.
  • Background color: You can control the background color of a component using the bg or backgroundColor prop.
  • Font color: You can control the text color of a component using the color prop.
  • CSS colors: Colors in Chakra UI aren't just limited to the built-in color palette. You can use any valid CSS color name, a hex color code, an rgb value, etc.
  • Responsive design: When using color props in Chakra UI, you can also use responsive arrays to specify different values for different breakpoints.

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:

Examples

This Box has a bg of "blue".

This Box has a bg of green.700 and a color (font) of "white".

This Box has a backgroundColor of red.700.

This is a box with a background color

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.

A Box

Some Text

Responsive 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

Using Color Mode: Chakra UI supports both a light and dark color mode, and allows developers to toggle between them with ease. This is an incredible tool for enhancing user experience, but some developers may not know that you can customize these color modes per component. For example, you can set a specific font color that applies only when the app is in dark mode. Utilizing this feature allows for more control over the aesthetic of individual components in different color schemes.
In color mode designs, this box changes color based on the current color mode.

Code

Creative Idea No. 2

Use of ColorScheme Property: Chakra UI has predefined color schemes (like "teal", "red", "green", etc.) and shades (from 50 to 900). The colorScheme property often gets overlooked because it's generally used with button, badge, and other similar components, but it can also be used to set the font color and background color. The advantage of using the colorScheme property is that it automatically adjusts the color contrast to be accessible.

I am using ColorScheme!

Code

Creative Idea No. 3

Transparent Colors: Chakra UI offers the ability to use "transparent" colors. These are like regular colors but have a fixed opacity. This means you can create a background color with a certain level of transparency and not worry about it becoming too transparent if the background color behind it changes. These "transparent" colors are really powerful for creating overlays or backdrop effects, which can create some compelling UI effects.
This is the content inside the overlay box.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.