Runtime theming — persisted --lantern-* token overrides.
Render <.theme /> once (e.g. in the root layout). The LanternTheme hook
loads persisted overrides from localStorage and injects them as a stylesheet,
so user-selected themes apply instantly on every page and survive reloads.
<Theme.theme />Change the theme from the client:
window.dispatchEvent(new CustomEvent("lantern:set-theme", {detail: {
light: {accent: "oklch(0.637 0.192 38)"},
dark: {accent: "oklch(0.72 0.15 250)"},
radius: "0.75rem",
density: "comfortable"
}}))or from the server: LanternUI.set_theme(socket, %{...}) /
LanternUI.reset_theme(socket). Keys in light/dark become
--lantern-<key> custom properties scoped to the matching theme (class or
system); radius maps to --lantern-radius; density sets
data-lantern-density on <html>. A nil/empty detail resets.
Built-in presets (opt-in, never default): preset="shadcn" sets
data-lantern-theme="shadcn" on <html>, swapping lantern's tokens onto
shadcn's neutral vocabulary (light + dark) with shadcn proportions
(see priv/static/lantern_ui_theme.css). Or set the attribute by hand on
<html> or any subtree — no hook needed.
Summary
Functions
Attributes
id(:string) - Stable DOM id for the theme hook element. Defaults to"lantern-theme".storage_key(:string) - localStorage key for persisted token overrides. Defaults to"lui-theme".preset(:string) - Built-in theme preset. Sets data-lantern-theme on <html> via the hook. Defaults tonil. Must be one of"shadcn", ornil.