Skip to content

Theme

A Theme is the design tokens of a Brand, its color, type, spacing, radius, and motion, that every Component reads when it renders.

Properties

PropertyTypeRequiredDescription
tokensjsonrequiredThe token values, in light and dark modes.
csstextExtra CSS, applied after the tokens.

Object

JSON
{
  "$id": "https://api.sb/ledgerlark.com/themes/theme_1",
  "$type": "Theme",
  "tokens": {},
  "css": ":root { --radius: 6px; }"
}

Relationships

  • A Theme themes many Brands: a Theme sets a Brand’s color, type, spacing and motion. themes, inverse themedBy.

Verbs

  1. createCreates a Theme.
    POST /{namespace}/themesdoTheme.created
  2. getReturns one Theme by id.
    GET /{namespace}/themes/{id}readNo Event
  3. listReturns Themes, newest first, one page at a time.
    GET /{namespace}/themesreadNo Event
  4. updateChanges the given properties of a Theme.
    PATCH /{namespace}/themes/{id}doTheme.updated
  5. deleteDeletes a Theme; its history is kept.
    DELETE /{namespace}/themes/{id}doTheme.deleted

Permissions

Which Access level may call each Verb. One-way Verbs wait their delay window.

Operationowneradminmemberviewer
Theme.createYesYesYesNo
Theme.getYesYesYesYes
Theme.listYesYesYesYes
Theme.updateYesYesYesNo
Theme.deleteYesYesYesNo

Call it

Text
Add a theme to PatentPad.

Example

JSON
{
  "color": {
    "light": { "accent": "oklch(52% 0.08 200)", "ink": "oklch(24% 0.02 220)", "paper": "oklch(98% 0.004 200)" },
    "dark": { "accent": "oklch(70% 0.08 200)", "ink": "oklch(93% 0.01 200)", "paper": "oklch(19% 0.02 220)" }
  },
  "font": { "display": "Newsreader", "body": "Public Sans" },
  "radius": { "card": "6px" },
  "motion": { "duration": "200ms", "easing": "ease-out", "reduce": "0ms" }
}