LanternUI.Components.Theme (LanternUI v0.8.2)

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.

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".