Sterling Theme

The Sterling theme provides modern, elegant, and accessible styles supporting light and dark mode automatically.

The @geoffcox/sterling-svelte-themes package provides the Sterling theme.

Installation

See the the steps in the Installation documentation for adding the Sterling Theme. Also read the Theme Ready section in the Architecture topic to understand how sterling-svelte components make styling easier.

Light and Dark Modes

CSS variables now use the light-dark() function to select different colors depending on the color-scheme set at the document root.

To manually switch between light or dark modes, the colorScheme action is provided to make it easy.

Variations

Some component CSS have special classes to provide for visual variations. For example, Button has:

Shapes: capsule, circular, square
Emphasis: secondary, tool
Colors: blue, green, orange, red

You can mix and match classes.

CSS Variables

The Sterling theme uses CSS variables to provide consistent styling and easy customization. The CSS variables are available to use or override in your own components.

CSS variables are prefixed with --stsv-
Names follow the Block**Element**Modifier (BEM) convention. For example, Button CSS uses these variables:
```
--stsv-button__background-color
--stsv-button__border-color--hover
--stsv-common__outline-color
```
The variables are grouped:
- common - application wide
- button - for buttons and clickable components
- input - for inputs, radios, checkboxes and other form components

Common

--stsv-common__background-color

--stsv-common__border-color

--stsv-common__color

Common - Outline

--stsv-common__outline-color

Common - Disabled

Common - Reduced Emphasis

--stsv-common__background-color--secondary

--stsv-common__color--secondary

--stsv-common__background-color--subtle

--stsv-common__color--subtle

--stsv-common__background-color--faint

--stsv-common__color--faint

Common - Status

--stsv-common__background-color--info

--stsv-common__border-color--info

--stsv-common__color--info

--stsv-common__background-color--success

--stsv-common__border-color--success

--stsv-common__color--success

--stsv-common__background-color--warning

--stsv-common__border-color--warning

--stsv-common__color--warning

--stsv-common__background-color--error

--stsv-common__border-color--error

--stsv-common__color--error

Button

--stsv-button__background-color

--stsv-button__border-color

--stsv-button__color

--stsv-button__background-color--hover

--stsv-button__border-color--hover

--stsv-button__color--hover

--stsv-button__background-color--focus

--stsv-button__border-color--focus

--stsv-button__color--focus

--stsv-button__background-color--active

--stsv-button__border-color--active

--stsv-button__color--active

Button - Colors

--stsv-button__background-color--blue

--stsv-button__border-color--blue

--stsv-button__color--blue

--stsv-button__background-color--blue-hover

--stsv-button__border-color--blue-hover

--stsv-button__color--blue-hover

--stsv-button__background-color--blue-focus

--stsv-button__border-color--blue-focus

--stsv-button__color--blue-focus

--stsv-button__background-color--blue-active

--stsv-button__border-color--blue-active

--stsv-button__color--blue-active

--stsv-button__background-color--green

--stsv-button__border-color--green

--stsv-button__color--green

--stsv-button__background-color--green-hover

--stsv-button__border-color--green-hover

--stsv-button__color--green-hover

--stsv-button__background-color--green-focus

--stsv-button__border-color--green-focus

--stsv-button__color--green-focus

--stsv-button__background-color--green-active

--stsv-button__border-color--green-active

--stsv-button__color--green-active

--stsv-button__background-color--orange

--stsv-button__border-color--orange

--stsv-button__color--orange

--stsv-button__background-color--orange-hover

--stsv-button__border-color--orange-hover

--stsv-button__color--orange-hover

--stsv-button__background-color--orange-focus

--stsv-button__border-color--orange-focus

--stsv-button__color--orange-focus

--stsv-button__background-color--orange-active

--stsv-button__border-color--orange-active

--stsv-button__color--orange-active

--stsv-button__background-color--red

--stsv-button__border-color--red

--stsv-button__color--red

--stsv-button__background-color--red-hover

--stsv-button__border-color--red-hover

--stsv-button__color--red-hover

--stsv-button__background-color--red-focus

--stsv-button__border-color--red-focus

--stsv-button__color--red-focus

--stsv-button__background-color--red-active

--stsv-button__border-color--red-active

--stsv-button__color--red-active

Input

--stsv-input__background-color

--stsv-input__border-color

--stsv-input__color

--stsv-input__background-color--hover

--stsv-input__border-color--hover

--stsv-input__color--hover

--stsv-input__background-color--focus

--stsv-input__border-color--focus

--stsv-input__color--focus

--stsv-input__background-color--selected

--stsv-input__border-color--selected

--stsv-input__color--selected