Nostr WoT

Temi e stili

Guida di integrazione e riferimento API: Temi e stili.

Questo riferimento API dettagliato è mantenuto in inglese e segue il codice SDK collegato. Gli esempi con variabili applicative richiedono il proprio firmatario, chiavi, archiviazione o interfaccia.

Theming

Option A: CSS variables. The provider sets data-nui-root on its wrapper, so all theming attributes scope cleanly.

css
[data-nui-root] {
  --nui-bg: #fafafa;
  --nui-fg: #18181b;
  --nui-muted: #71717a;
  --nui-border: #e4e4e7;
  --nui-input-bg: #ffffff;

  --nui-primary: #6366f1;
  --nui-primary-fg: #ffffff;
  --nui-primary-hover: #4f46e5;

  /* Radius is split so cards and pill-style buttons can diverge.
     Both fall back to --nui-radius if you only set the legacy var. */
  --nui-radius: 10px;            /* legacy / fallback */
  --nui-card-radius: 10px;       /* modal, inputs, method tiles */
  --nui-btn-radius: 9999px;      /* primary action buttons */

  --nui-shadow: 0 8px 24px rgba(0,0,0,0.12);
  --nui-space: 12px;
  --nui-font: "Inter", system-ui, sans-serif;

  --nui-overlay-bg: rgba(15, 23, 42, 0.6);
  --nui-z-modal: 9999;
}

Force a theme:

tsx
<NostrSessionProvider theme="dark">{...}</NostrSessionProvider>
// or:  theme="light" | "system" | "la-crypta"

Built-in themes

theme=What you get
"system" (default)Light, with dark fallback via prefers-color-scheme: dark
"light"Forced light palette regardless of system
"dark"Forced dark palette
"la-crypta"La Crypta palette — near-black background (#0a0a0a), lime-green primary (#b4f953), 12px card radius + fully pill-shaped buttons (--nui-btn-radius: 9999px), Inter font stack

Each theme is a [data-nui-root][data-nui-theme="..."] block in styles.css that overrides the variables above. To add your own, target the same selector in your stylesheet and re-define whichever variables you want.

Per-element overrides via the classes slot prop on every component:

tsx
<LoginWidget
  classes={{
    root: "my-card",
    title: "text-xl font-bold",
    method: "rounded-2xl shadow-md",
    input: "border-2 border-blue-500",
  }}
  styles={{
    root: { padding: 24 },
  }}
/>

Available slots:

ts
type LoginWidgetSlot =
  | "root" | "title" | "subtitle"
  | "methods" | "method" | "methodIcon" | "methodText" | "methodLabel" | "methodHint"
  | "divider" | "input" | "inputRow"
  | "primaryButton" | "back" | "error" | "warning" | "keyDisplay";

type ModalSlot = "overlay" | "modal" | "close";
type LoginButtonSlot = "button" | "spinner";

<LoginModal> accepts both classes (forwarded to the widget) and modalClasses (the modal chrome itself).

Skip the default stylesheet

Don't import @nostr-wot/ui/styles.css. Components still render — they just have no default styles. Provide your own CSS targeting the .nui-* classes, or use the classes slots to swap in your design-system classes (Tailwind, shadcn, etc.).

Riferimento API

Riferimento APIMigrazione dai pacchetti precedenti