theme
The five looks (`scifi`, `fantasy`, `cartoon`, `pixel`, `minimal`) and the drawing helpers every widget uses, so one setting reskins all of them.
theme
The five looks (scifi, fantasy, cartoon, pixel, minimal) and the drawing helpers every widget uses, so one setting reskins all of them.
A theme is a palette plus a few shape rules: corner style, edge weight, drop shadow and font. Widgets never pick colours themselves. They ask the theme for panel, accent, text and so on, and draw with T.panel, T.text, T.bar, T.ring, T.check, T.badge and T.pixelBox. Use T.get(name) to read a theme and T.register(name, def, base?) to add your own, which Nav.setTheme then accepts. T.textWidth and T.fit measure text and shorten it to fit.
Interface
What this asset declares: the schema it conforms to, what it exposes, and the rendered structured payload.
conforms to
zero/source-extract/v2navUiKit.theme — the five looks, and the drawing helpers every widget uses so one setting reskins all of them. A theme is a palette plus a few shape rules (corner style, edge weight, drop shadow, font). Widgets never pick colours themselves: they ask the theme for `panel`, `accent`, `text`... and draw frames with `T.panel`, text with `T.text`, round frames with `T.ring`. The pixel theme draws its text with a built-in 3x5 bitmap font made of rects, so it stays pixel-true at any size.
get(name: string?) → Theme
The theme table for a name (falls back to the default theme).
| arg | type | description |
|---|---|---|
| name | string? |
has(name: string?) → boolean
Whether a theme of that name exists.
| arg | type | description |
|---|---|---|
| name | string? |
register(name: string, def: { [string]: any }, base: string?) → void
Register or override a theme; missing keys come from `base` (default scifi).
| arg | type | description |
|---|---|---|
| name | string | |
| def | { [string]: any } | |
| base | string? |
alpha(color: string, aa: string) → string
Replace a colour's alpha: alpha("#00E5FF", "80") -> "#00E5FF80".
| arg | type | description |
|---|---|---|
| color | string | |
| aa | string |
fade(color: string, k: number) → string
Same as alpha but from a 0..1 opacity multiplied into the colour's own alpha.
| arg | type | description |
|---|---|---|
| color | string | |
| k | number |
runs(ch: string) → void
| arg | type | description |
|---|---|---|
| ch | string |
pixelCell(size: number) → number
| arg | type | description |
|---|---|---|
| size | number |
pixelClean(s: string) → string
| arg | type | description |
|---|---|---|
| s | string |
pixelWidth(s: string, size: number) → number
| arg | type | description |
|---|---|---|
| s | string | |
| size | number |
pixelText(cmds: { any }, x: number, y: number, s: string, size: number, color: string, align: string?) → void
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| x | number | |
| y | number | |
| s | string | |
| size | number | |
| color | string | |
| align | string? |
textWidth(th: Theme, s: string, size: number, role: string?) → number
Estimated width of a string in the theme's font at `size`.
| arg | type | description |
|---|---|---|
| th | Theme | |
| s | string | |
| size | number | |
| role | string? | "title" uses the display font, anything else the body font. |
fit(th: Theme, s: string, size: number, maxW: number, role: string?) → string
Fit a string into a width by trimming it with an ellipsis.
| arg | type | description |
|---|---|---|
| th | Theme | |
| s | string | |
| size | number | |
| maxW | number | |
| role | string? |
ink(th: Theme, color: string) → string
A colour for text drawn on this theme's panel: the colour itself, or the theme's ink when the colour is too light to read on a light card (a yellow waypoint title on a cartoon card).
| arg | type | description |
|---|---|---|
| th | Theme | |
| color | string |
lum(h: string) → number
| arg | type | description |
|---|---|---|
| h | string |
wrap(th: Theme, s: string, size: number, maxW: number, maxLines: number, role: string?) → void
Break text into lines no wider than maxW, at most maxLines (the last one fitted with ".." only if it still runs over).
| arg | type | description |
|---|---|---|
| th | Theme | |
| s | string | |
| size | number | |
| maxW | number | |
| maxLines | number | |
| role | string? |
text(cmds: { any }, th: Theme, x: number, y: number, s: string, size: number, color: string?, align: string?, role: string?) → void
Draw text vertically centred on y. align: left | center | right.
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| th | Theme | |
| x | number | |
| y | number | |
| s | string | |
| size | number | |
| color | string? | |
| align | string? | |
| role | string? | "title" (display font, upper-cased where the theme says so) or "body". |
rect(cmds: ?, x0: ?, y0: ?, x1: ?, y1: ?, fill: ?, stroke: ?, w: ?, r: ?) → void
| arg | type | description |
|---|---|---|
| cmds | ? | |
| x0 | ? | |
| y0 | ? | |
| x1 | ? | |
| y1 | ? | |
| fill | ? | |
| stroke | ? | |
| w | ? | |
| r | ? |
line(cmds: ?, x0: ?, y0: ?, x1: ?, y1: ?, color: ?, w: ?) → void
| arg | type | description |
|---|---|---|
| cmds | ? | |
| x0 | ? | |
| y0 | ? | |
| x1 | ? | |
| y1 | ? | |
| color | ? | |
| w | ? |
poly(cmds: ?, pts: ?, fill: ?, stroke: ?, w: ?) → void
| arg | type | description |
|---|---|---|
| cmds | ? | |
| pts | ? | |
| fill | ? | |
| stroke | ? | |
| w | ? |
diamond(cmds: ?, x: ?, y: ?, r: ?, fill: ?, stroke: ?) → void
| arg | type | description |
|---|---|---|
| cmds | ? | |
| x | ? | |
| y | ? | |
| r | ? | |
| fill | ? | |
| stroke | ? |
pixelBox(cmds: { any }, x0: number, y0: number, x1: number, y1: number, fill: string, edge: string, c: number?) → void
Stepped pixel border box (the pixel theme's frame).
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| x0 | number | |
| y0 | number | |
| x1 | number | |
| y1 | number | |
| fill | string | |
| edge | string | |
| c | number? |
panel(cmds: { any }, th: Theme, x0: number, y0: number, x1: number, y1: number, opts: any?) → void
A themed panel: chamfered sci-fi plate, gilded fantasy frame, outlined cartoon card with drop shadow, stepped pixel box or a soft minimal plate.
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| th | Theme | |
| x0 | number | |
| y0 | number | |
| x1 | number | |
| y1 | number | |
| opts | any? | { alpha = 0..1, accent = colour, fill = colour, flat = bool } |
ring(cmds: { any }, th: Theme, cx: number, cy: number, r: number, t: number?) → void
The round frame around a round minimap or a compass dial.
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| th | Theme | |
| cx | number | |
| cy | number | |
| r | number | |
| t | number? |
circle(rad: ?, stroke: ?, w: ?, fill: ?) → void
| arg | type | description |
|---|---|---|
| rad | ? | |
| stroke | ? | |
| w | ? | |
| fill | ? |
bar(cmds: { any }, th: Theme, x0: number, y0: number, x1: number, y1: number, frac: number, color: string?) → void
A progress bar filled to `frac` (0..1).
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| th | Theme | |
| x0 | number | |
| y0 | number | |
| x1 | number | |
| y1 | number | |
| frac | number | |
| color | string? |
check(cmds: { any }, th: Theme, x: number, y: number, s: number, done: boolean, k: number?) → void
A checkbox, ticked when `done`. `k` (0..1) animates the tick in.
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| th | Theme | |
| x | number | |
| y | number | |
| s | number | |
| done | boolean | |
| k | number? |
badge(cmds: { any }, th: Theme, x: number, y: number, s: string, size: number, color: string?, align: string?) → number
A small badge (a pill holding a short string, e.g. "3/5" or "120 m").
| arg | type | description |
|---|---|---|
| cmds | { any } | |
| th | Theme | |
| x | number | |
| y | number | |
| s | string | |
| size | number | |
| color | string? | |
| align | string? |
Theme = {Sub-parts
Everything contained inside this part. Assets are composite children (clickable cards). Files are leaf payloads. Expand any row to view its source.
Problems
Everything affecting this asset right now: its own problems, anything wrong inside it, and problems on its direct dependencies.
agent_score is exposed.+ quality × 0.35
+ performance × 0.25
± compat factor
Usability ratings
Did the part work as advertised when consumers tried to drop it in. Separate from upvotes: those are taste; this is "did it function".
Scoped to this part · feeds back into the world's score.