Themes

A theme is nothing more than a stylesheet that defines design tokens and applies custom styles to components. To create a theme, you will need a decent understanding of CSS, including CSS Custom Properties and the ::part selector.

All themes are scoped to classes using the data-theme attribute convention, where the value is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use light and dark, respectively. A custom theme called "Purple Power", for example, would use a class called sl-theme-purple-power.

This data attribute can be placed in any parent ancestor on a page, for example, on a sc-form element apply a theme style everything inside the form.

Developing a Theme

To develop a theme, we utilize StoryBook to lay out all the components and apply theme styles. You should find a file called themes.stories.ts in the root of the components directory.

This story will allow you to see all available components on a page so you can add css for your theme style to change the look of the components.

Running The Storybook Command

To start the development process, please run this command (in the packages/components directory)

yarn watch & yarn storybook

This will open up storybook in a new browser window and hot-reload any changes.