DicEx.Theme (dicEx v0.1.0)

Theme adapter for the dice roller.

A theme is a single map of colour keys that drives both layers of the UI:

the component chrome — emitted as CSS custom properties (--dicex-*);
the procedurally-drawn die faces — emitted as a canvas palette (JSON) the JS hooks consume for the 2D tiles and the 3D textures.

Pass a built-in name (:obsidian / :arcane / :dnd) or a custom map with any subset of the keys (missing ones fall back to the obsidian defaults), so an app can skin the roller without forking the package's JS or CSS.

# built-in
<.live_component module={DicExWeb.DiceRoller} id="r" theme="arcane" />

# fully custom
<.live_component module={DicExWeb.DiceRoller} id="r"
  theme={%{bg: "#0b1220", panel: "#111b2e", edge: "#1f3a5f",
           ink: "#e6f0ff", accent: "#38bdf8", face: "#0f1c30"}} />

Keys

Chrome (CSS): bg, panel, edge, ink, muted, accent, good, bad, stage_glow, stage_tile_a, stage_tile_b, control_bg, input_bg, pill_bg, roll_ink, roll_border, roll_hover. Dice faces (canvas): face, face_edge, pip, pip_shadow, sheen.

Summary

Functions

builtins()

The built-in theme names as strings.

canvas_palette(palette)

The canvas palette (string keys) the JS hooks expect for drawing die faces. Serialize with Jason.encode!/1 and pass via the data-palette attribute.

css_vars(palette)

The CSS custom properties for the component chrome, as a keyword list of "--dicex-*" => value pairs. The component injects these inline.

defaults()

The default (obsidian) palette.

resolve(theme)

Resolves a theme option into a complete palette map.