Colors

Set your base colors to appropriately reflect your brand. Color settings are used for the color palette in blocks and other Customizer settings.

How To Use

Vising Customizer > Theme Settings > Colors.
Set your colors however you'd like.
Optionally add any custom colors you'd like to use in your block color settings or in CSS.

Mai Theme's Color settings will automatically be used as the default color choices for block and other Customizer color settings!

Color Settings

The color settings are used for various elements of your theme, depending on which theme you're using, though they are mostly pretty general. The default colors come from the theme config.php file. Once colors are saved/changed, then the chosen values are used throughout your site.

Background

This is the main body background color. It's typically white or something very light. It can be dark but will take some care to set text colors inside nested blocks.

Background Alt

This is intended to be used as a lighter colored separator for home/landing page sections, subtle CTA backgrounds, etc.

Site Header

This is the site header background color. If this color is dark, the text and menu item color will automatically switch to white.

Body

This is the main body font/text color.

Heading

This is the heading font/text color.

Link

This is the main link color. Make sure it's dark enough to pass accessibility color contrast ratios.

Button Primary

This is the default button background color. The button text color is automatically generated based on this setting, though you can customize this color with some custom CSS.

Button Secondary

This is for secondary buttons (via button block styles) as well as archive and Mai Post/Term Grid read more buttons.

Custom Colors

Custom colors are great for extra colors you may use in a few places on your site. These will be available as default block color choices and can also be used by custom color number value in CSS.

Use in your custom CSS via var(--color-custom-1) .