LanternUI.Components.Theme (LanternUI v0.9.0)

Copy Markdown View Source

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

theme(assigns)

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 to nil. Must be one of "shadcn", or nil.