You can override the default theme provided by Cosmos by using the Configuration component's theme prop. You can target your entire application, individual components, or even particuar 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 Cosmos 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 Cosmos. 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 Cosmos 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.
This feature is currently disabled when viewing the site in dark mode.
The base portion of the Cosmos 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 Cosmos 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.