Styling & Runtime
How theme definitions are translated into native rendering behavior and how layout, spacing, and styling are resolved at runtime.
Overview
Suduxu themes aren't rendered directly. They're first parsed into an intermediate node structure, then resolved by a runtime renderer depending on the theme type — both share the same UINode + property map underneath.
XML themes
Resolved into native Compose components.
HTML themes
Rendered in a WebView with injected components.
Runtime model
Every UI element is represented as a node:
Prop
Type
Rendering is recursive — each node resolves itself, then delegates rendering of its children.
Property resolution
Props are resolved in a fixed priority order:
Explicit component props
Values set directly on the node, e.g. backgroundColor, size.
Layout modifiers
Padding, fill, and spacing, applied next.
Component defaults
Falls back to whatever the component implementation defines.
Unrecognized props are ignored unless a component explicitly handles them.
Layout system
A shared modifier pipeline drives layout across both theme types.
Padding
{ "padding": 16 }{ "padding": { "top": 8, "bottom": 8, "start": 16, "end": 16 } }left / right are accepted as aliases for start / end.
Fill behavior
Prop
Type
Fill modifiers resolve before component-specific ones.
A Column with fillMaxSize = true always overrides explicit width/height
constraints.
Runtime rendering flow
Parse
Read the node from the theme definition.
Convert
Turn props into typed values.
Apply layout
Resolve padding, fill, and sizing modifiers.
Render
Draw the component — Compose or its WebView equivalent.
Recurse
Render children the same way.
This keeps behavior consistent across XML and HTML themes.
Shared vs. platform-specific
Shared
Node structure (UINode), prop parsing rules, and layout semantics (padding, fill, spacing).
Platform-specific
XML renders via Jetpack Compose; HTML renders via WebView DOM injection and a JS runtime.
Styling in XML themes is intentionally not CSS-based — it's expressed through explicit props, layout modifiers, and component-level parameters instead, which keeps XML themes deterministic and platform-independent.