4.63.0

Theme Provider

Set custom themes

The main docs layout sets s-theme-provider appearance from localStorage (skylab-docsite-appearance) when the value is light, dark, or system; otherwise it defaults to light. On lower-environment builds (for example MR preview and CI docsite, where ASSETS_BASE_URL is not the production CDN), the header includes an s-select theme control that updates that key. Production docsite builds omit the picker.

Demo

API

Tags

Name Description
<s-theme-provider> Custom element, accepts attributes which can significantly change the appearance of the page. It does not need to wrap other elements, it just needs to be present in the DOM.

Attributes

Name Value Required Description
direction
  • ltr
  • rtl

Sets the text direction

for the entire page.
appearance
  • light (default)
  • dark
  • system

Controls color appearance for Skylab semantic CSS variables. The active value is reflected on the document root as data-sk-theme: the attribute is removed for light, and set to dark or system for those modes. With system, dark semantic overrides apply when the user prefers a dark color scheme (prefers-color-scheme: dark). Components inside a shadow root also receive dark mode through the inherited --sk-theme custom property — consumer apps don't need to forward anything to their shadow hosts.

Demo

API

Tags

Name Description
<s-theme-provider> Custom element, accepts attributes which can significantly change the appearance of the page. It does not need to wrap other elements, it just needs to be present in the DOM.

Props

Name Value Required Description
direction
  • ltr
  • rtl

Sets the text direction

for the entire page.
appearance
  • light (default)
  • dark
  • system

Controls color appearance for Skylab semantic CSS variables. The active value is reflected on the document root as data-sk-theme: the attribute is removed for light, and set to dark or system for those modes. With system, dark semantic overrides apply when the user prefers a dark color scheme (prefers-color-scheme: dark). Components inside a shadow root also receive dark mode through the inherited --sk-theme custom property — consumer apps don't need to forward anything to their shadow hosts.

Skylab React links

General information about using our React package

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com