Theme

The theme system provides global visual consistency by centralizing default styles for events and scenes.

Theme Structure

Story
└── Theme
    ├── Event
    │   ├── Layout
    │   ├── Text Button Presets
    │   └── Media Button Presets
    ├── Scene
    │   ├── Events Layout Presets
    │   ├── Communication App Presets
    │   ├── Dialogue Box Presets
    │   └── Text Scene Presets
    └── Fonts

Event Theme

Text Button Presets

Define the default appearance of text buttons. Multiple preset groups can be created and selected per button via the Theme property:

• Font size, color
• Border width, color, style, radius
• Background color, background image and loop time
• Normal/Hover/Enter/Leave four-layer styles
• Height and width

Media Button Presets

Define the default appearance of media buttons, also supporting multiple preset groups:

• Height
• Normal/Hover/Enter/Leave four-layer styles

Layout

Global default for event layout. See Event Layout.

Scene Theme

Events Layout Presets

An array of scene-level event layout presets, selectable in a scene's Events Layout property.

Communication App Presets

Phone mockup appearance presets for the communication scene:

• Phone mockup (image/video)
• Front camera style (dots/dynamic island)
• Screen corner radius, internal padding
• Inner/outer styles
• Position, height, show/hide time

Dialogue Box Presets

Dialog box appearance presets for the dialogue scene:

• Text display area
• Border, radius, font size, color
• Text shadow, padding

Text Scene Presets

Style presets for text scenes:

• Max width, margin, padding
• Font size, text alignment

Fonts

Import custom font files. Once registered, they can be referenced anywhere via the fontFamily style property.

Fonts are registered when the story loads, using the font object's title as the name:

{ "fontFamily": "Font Title" }