Light/dark/system theme support.
Summary
Functions
Inline script for your root layout <head>. Applies the persisted theme and
appearance preferences (palette, dark variant, contrast, density, radius)
before first paint so there is no flash of the wrong scheme. Pass a nonce
if you use a Content-Security-Policy.
A three-way theme toggle (system / light / dark) rendered as a segmented radio group. Entirely client-owned; the server never needs to know.
Functions
Inline script for your root layout <head>. Applies the persisted theme and
appearance preferences (palette, dark variant, contrast, density, radius)
before first paint so there is no flash of the wrong scheme. Pass a nonce
if you use a Content-Security-Policy.
<.theme_script nonce={@csp_nonce} />Attributes
nonce(:string) - Defaults tonil.
A three-way theme toggle (system / light / dark) rendered as a segmented radio group. Entirely client-owned; the server never needs to know.
<.theme_toggle id="theme" />Attributes
id(:string) - Defaults to"sl-theme-toggle".class(:any) - Defaults tonil.- Global attributes are accepted.