Styling

Shoelace is designed to be highly customizable through pure CSS. Out of the box, you can choose from a light or dark theme.

The easiest way to customize Shoelace is to override the built-in theme design tokens.

If you’re customizing the light theme, you should scope your styles to the following selectors:

If you’re customizing the dark theme, you should scope your styles to the following selectors.

Some components offer different variants (primary, success, warning, danger, neutral). Styling each variant is done by changing the Shoelace color tokens, which you can customize by adding them to the above selectors. You can find the theme color tokens on the Shoelace official website: https://shoelace.style/tokens/color#theme-tokens

Here is an example of how you can customize primary design tokens for the dark theme:

Whereas design tokens offer a high-level way to customize the library, CSS parts offer a low-level way to customize individual components. Again, this is done with pure CSS.

In each component page, you will find the Parts section, where you can easily copy the styles and use them in your toddle project. Here is an example that modifies the button component.

In this example, we use the button element tag, but you can also use a button ID or class. In this case, the selector would look like this: ".yourClass::part(base) {}" or for an ID, "#yourID::part(base) {}". This is useful if you want to target a specific button on the page and not all buttons using the sl-button tag.