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.
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.
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.