Schema

A Schema defines the Context Colors that are used in your application (i.e. referenced in your markup). A Schema is one of two essential parameters supplied to initTwThemes() (the other is Themes).

To fully understand this topic, please refer to discussions on Context Colors and Context Color Shades.

Structure:

In it's simplest form, a Schema is merely an array of context color names.

['primaryLight', 'primary', 'primaryDark', 'secondary', 'onLight', 'onDark']

This example specifies six single context colors that can be used in your application.

• As a result, your markup may reference colors such as: bg-primaryDark, text-onDark, etc.

• NOTE: your Theme may seed these colors with either a tailwind color shade (e.g. 'gray-100'), or a custom color **(e.g. '#E4E4E7').

tailwind's numeric shade scale:

If you wish to use tailwind's numeric shade scale in your context color, simply wrap the schema's color string in an "inner" array (a single element array):

['primaryLight', 'primary', 'primaryDark', 'secondary', 'onLight', 'onDark', ['error']]

This example adds an error context color which automatically uses the tailwind numeric shade scale.

• As a result your markup can specify (for example) bg-error or bg-error-400 (NOTE: the error color reference defaults to the 500 shade).

• NOTE: your Theme must must seed this error color with a tailwind color that is shadable (e.g. 'red').

Note on Shade Inversion:

Regardless of whether you use tailwind's numeric shade scale or not, you may still invert the shades of either approach, providing the Theme is seeding this with tailwind colors. In other words, custom colors cannot be shade inverted.

For more information and Best Practices, please refer to the discussions on Context Colors and Context Color Shades.