Customize
Customize
The design of Cosmos components can be customized to allow projects and brands to create unique experiences for their users on top of trusted and ready-to-use standards. Read more about the concept behind Code.
CSS Custom Properties
CSS Custom Properties are a reliable and easy way to customize the look of a component at a high level. Custom Properties are limited by design, they only allow selected styles of a component to be changed.
We recommend targeting your custom element with specific selectors, such as a class.
Note:
- If you pass prefix that is an icon, you have to set its colour yourself via the --cosmos-icon-color CSS property.
Shadow Parts
While Custom Properties offer an easy and fast way to customize a component's style, they are limited by design. For more flexibility and advanced styling, components offer a low-level way to customize them via CSS Shadow Parts.
⚠️ Caution
Customizing components using Shadow Parts isn't free of risks. Style overwrites are not guaranteed to work with future updates of Cosmos.