Skip to main content
TradeWidget supports the following appearance props:
  • theme
  • vars
  • className
  • style

​
Built-in themes

<TradeWidget theme="dark" config={{}} />
<TradeWidget theme="light" config={{}} />
Theme defaults:
  • TradeWidget: "dark"

​
Override theme variables

Use vars to override the widget’s CSS variables. 
<TradeWidget
  theme="dark"
  config={{}}
  vars={{
    accent: "#22c55e",
    border: "#1f2937",
    surface: "#050816",
    surfaceAlt: "#0b1220",
    radius: "18px",
    fontFamily: "'IBM Plex Mono', monospace",
    fontSize: "14px",
  }}
/>
The vars object supports these fields:
FieldDescription
bgRoot background color
fgPrimary text color
accentMain interactive accent
borderBorder color
mutedMuted text and icon color
surfaceMain surface color
surfaceAltSecondary surface color
surfaceHoverHover surface color
textSubtleSubtle text and placeholder color
accentHoverHover state for accent styling
successSuccess color
dangerError or danger color
overlayOverlay tint used in layered UI
modalBackdropFull-screen modal scrim color
shadowBox shadow token for elevated surfaces
radiusShared border radius token
fontFamilyRoot font family
fontSizeRoot font size
lineHeightRoot line height
letterSpacingRoot letter spacing
The bundled themes use Roboto Mono and the stylesheet imports that font from Google Fonts. If you want to keep typography fully local to your app, override fontFamily.

​
Use host styling props

className and style are applied to the widget root. 
<TradeWidget
  className="mx-auto max-w-[640px]"
  style={{ marginTop: "2rem" }}
  theme="dark"
  config={{}}
/>
style is merged after the generated CSS variables, so it is the last inline layer applied to the root element.

​
Style isolation

The widget does not use Shadow DOM. Instead, it relies on scoped CSS:
  • all widget styles live under [data-delora-widget-root]
  • the package does not ship Tailwind preflight
  • the widget sets its own typography and box model under the scoped root
This greatly reduces leakage between the host app and the widget, but extreme global host rules can still affect embedded content.