Theme overview

Configure appearance, accent, gray, radius, and scaling.

The Theme component is the root of Essence UI styling. It sets CSS custom properties consumed by every Themes component.

Theme component

<.theme
  accent_color="crimson"
  gray_color="mauve"
  radius="full"
  is_root={false}
  has_background={false}
>
  <.button>Crimson</.button>
</.theme>

Appearance

Use appearance to force light or dark, or inherit to follow the document (site appearance toggle).

inherit — follow html.light-theme / html.dark-theme
light — force light tokens on this subtree
dark — force dark tokens on this subtree

Tokens

| Prop | Values | |------|--------| | accent_color | gray, gold, … sky (26 accents) | | gray_color | auto, gray, mauve, slate, sage, olive, sand | | radius | none, small, medium, large, full | | scaling | 90%, 95%, 100%, 105%, 110% | | panel_background | solid, translucent |

ThemePanel

Use <.theme_panel /> in development or playgrounds to tweak theme values live. See the Playground.

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