Components
Color scheme switch
Color scheme switch
Light, dark and system, in three faces: a toggle, a dropdown, and a segmented control. All three share one no-flash contract, follow the OS live while set to system, and keep every open tab in sync. Free in petal_components 4.8.
heex
Installation
The no-flash script
Render color_scheme_script once in your layout’s <head>. It applies the scheme before first paint (no white flash in dark mode), follows the OS while the preference is system, and keeps every open tab in sync via storage events.
<head>
...
<.color_scheme_script />
</head>The hook
The PetalColorScheme hook ships in the petal_components JavaScript bundle you already import - there is nothing to copy.
Explicit choices are stored in localStorage.scheme, drop-in compatible with existing petal apps, and safe where storage is blocked (private browsing, sandboxed iframes). Your own code can listen for petal:scheme-changed, which fires with {preference, resolved}.
Properties
| Attribute | Type | Default | Description |
|---|---|---|---|
class
|
any |
nil
|
|
dark_label
|
string |
"Dark"
|
label/aria text (i18n) |
id*
|
string |
||
labels
|
boolean |
false
|
dropdown variant only: show text labels beside the icons instead of the icon-only rail |
light_label
|
string |
"Light"
|
label/aria text (i18n) |
rest
|
global |
||
system_label
|
string |
"System"
|
label/aria text (i18n) |
variant
|
string |
"toggle"
|
toggle flips light/dark; dropdown and segmented offer system too
one of: "toggle", "dropdown", "segmented"
|
:dark_icon
slot
|
slot |
replaces the moon icon - drop in any svg, it is sized to fill | |
:light_icon
slot
|
slot |
replaces the sun icon - drop in any svg, it is sized to fill | |
:system_icon
slot
|
slot |
replaces the monitor icon - drop in any svg, it is sized to fill |