For an overview of theming see the Theme overview.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
accent_color
|
string
|
"indigo"
|
|
appearance
|
string
|
"inherit"
|
|
as
|
string
|
"div"
|
Element to render. |
class
|
any
|
nil
|
|
gray_color
|
string
|
"auto"
|
|
has_background
|
boolean
|
true
|
|
is_root
|
boolean
|
true
|
When true, sets data-is-root-theme for viewport styling. |
panel_background
|
string
|
"solid"
|
|
radius
|
string
|
"medium"
|
|
scaling
|
string
|
"100%"
|
|
style
|
string
|
nil
|
accent_color
Type
string
Default
"indigo"
appearance
Type
string
Default
"inherit"
as
Element to render.
Type
string
Default
"div"
class
Type
any
Default
nil
gray_color
Type
string
Default
"auto"
has_background
Type
boolean
Default
true
is_root
When true, sets data-is-root-theme for viewport styling.
Type
boolean
Default
true
panel_background
Type
string
Default
"solid"
radius
Type
string
Default
"medium"
scaling
Type
string
Default
"100%"
style
Type
string
Default
nil
Examples
Basic configuration
Wrap a component tree in theme to provide or modify configuration for all children.
Feedback
Attach screenshot?
<.box max_width="400px">
<.card size="2">
<.flex direction="column" gap="3">
<.flex direction="column" gap="1">
<.text as="div" weight="bold" size="2">Feedback</.text>
<.text_area placeholder="Write your feedback…" />
</.flex>
<.flex justify="between" align="center">
<.text color="gray" size="2">Attach screenshot?</.text>
<.switch id="theme-docs-switch" size="1" default_checked />
</.flex>
<.grid columns="2" gap="2">
<.button variant="surface">Back</.button><.button>Send</.button>
</.grid>
</.flex>
</.card>
</.box>Nesting
Nest another theme to modify configuration for a specific subtree. Configuration is inherited from the parent where not overridden.
Global
Feedback
Child
Feedback
<.card size="2">
<.flex gap="6" wrap="wrap">
<.flex direction="column" gap="3">
<.heading as="h5" size="2">Global</.heading>
<.flex direction="column" gap="1">
<.text as="div" weight="bold" size="2">Feedback</.text>
<.text_area placeholder="Write your feedback…" />
</.flex>
<.button>Send</.button>
</.flex>
<.theme accent_color="cyan" radius="full" is_root={false}>
<.card size="2">
<.flex direction="column" gap="3">
<.heading as="h5" size="2">Child</.heading>
<.flex direction="column" gap="1">
<.text as="div" weight="bold" size="2">Feedback</.text>
<.text_area placeholder="Write your feedback…" />
</.flex>
<.button>Send</.button>
</.flex>
</.card>
</.theme>
</.flex>
</.card>