Theme

You can override the default theme provided by Constellation by using the Configuration component's theme prop. You can target your entire application, individual components, or even particular sections of code. In order to override the theme, you must pass along a JSON file or an inline JS object that contains your theme declaration. If you wish to override Constellation styles, you need to make sure you are targeting the exact property as it is displayed in the examples below.

The theme tree below represents all of the theme properties that come with Constellation. Each property can be edited below and the changes made here will reflect on all of the code examples throughout this entire site. You can toggle between the default Constellation theme and your custom changes made on this page via the control within each demo. If you would like to permanently remove your custom theme, click the Restore Defaults button below.

The base portion of the Constellation theme contains styles that are widely used by other components. This is a great place if you would like to change the entire look and feel of your application, since a change here will most likely affect many other components you may be using.

The components portion of the Constellation theme contains styles that apply to specific components. If you want to only modify the styling of a couple components without changing the theme on a larger scale, you should be applying your changes here.

Disclaimer: Properties of the theme nested within the components section are more volatile and should be avoided unless absolutely necessary. Components are constantly updated within the library, and there may be tokens within the theme that the components themselves no longer use. The theme is not routinely cleaned for these deprecations as the possibility of the components using those tokens again in the future always exists.

Neutrals

Reds

Oranges

Greens

Blues

Purples