Skip to main content

​
Theming

The widget uses CSS custom properties for all visual styling. Override them on the <argyros-swap> element to match your brand.

​
Built-in Themes

​
Dark (default)

<argyros-swap theme="dark" api-key="..."></argyros-swap>

​
Light

<argyros-swap theme="light" api-key="..."></argyros-swap>

​
CSS Variables

Override any variable on the host element: 
argyros-swap {
  --argyros-accent: #00ff88;
  --argyros-radius: 12px;
}

​
Full Variable Reference

VariableDark DefaultLight DefaultDescription
--argyros-bg#0c0c10#ffffffWidget background
--argyros-surface#151519#f5f5f7Card/panel background
--argyros-surface-hover#1e1e25#ebebefHover state background
--argyros-border#252530#d4d4dcBorder color
--argyros-text#e8e8ed#1a1a2ePrimary text
--argyros-text-secondary#7a7a8a#6b6b7aSecondary text
--argyros-text-dim#555565#9a9aaaDimmed text (placeholders)
--argyros-accent#c8ff00#1a1a2eAccent / CTA button color
--argyros-accent-hover#d4ff33#2d2d45Accent hover state
--argyros-error#ff4d6a#ff4d6aError color
--argyros-warning#ffaa00#ffaa00Warning color (price impact)
--argyros-success#00d68f#00d68fSuccess color
--argyros-radius20px20pxOuter border radius
--argyros-radius-sm14px14pxInner panel border radius
--argyros-badge-bg#0a0a0e#e8e8edToken badge background
--argyros-font'Inter', -apple-system, ...'Inter', -apple-system, ...Font family

​
Custom Branding Examples

​
Green accent

argyros-swap {
  --argyros-accent: #00ff88;
  --argyros-accent-hover: #33ff9f;
}

​
Rounded corners

argyros-swap {
  --argyros-radius: 24px;
  --argyros-radius-sm: 18px;
}

​
Sharp corners

argyros-swap {
  --argyros-radius: 4px;
  --argyros-radius-sm: 2px;
}

​
Custom background to match your app

argyros-swap {
  --argyros-bg: #1a1b2e;
  --argyros-surface: #222340;
  --argyros-surface-hover: #2a2b50;
  --argyros-border: #3a3b55;
}

​
Custom font

argyros-swap {
  --argyros-font: "JetBrains Mono", monospace;
}

​
Shadow DOM

The widget renders inside a shadow DOM, so your page styles don’t leak in and widget styles don’t leak out. CSS custom properties are the only way to customize the appearance from the outside. This is by design — it ensures the widget looks correct regardless of your page’s CSS.

​
Width

The widget has max-width: 460px and width: 100%. To control its size, wrap it in a container: 
<div style="width: 400px; margin: 0 auto;">
  <argyros-swap api-key="..." theme="dark"></argyros-swap>
</div>