Customization Guide
Control the look and feel of widgets with data attributes and CSS custom properties.
Themes
Set the data-theme attribute on the script tag:
<!-- Light theme (default) -->
data-theme="light"
<!-- Dark theme -->
data-theme="dark"
<!-- Auto-detect from system preference -->
data-theme="auto"The auto theme listens to prefers-color-scheme and switches dynamically.
Accent Colors
Saffron
default
Celestial
celestial
Emerald
emerald
Purple
purple
data-accent="celestial"Size Variants
| Size | Max Width | Best For |
|---|---|---|
| compact | 280px | Sidebars, narrow columns |
| standard | 380px | Content areas, blog posts |
| wide | 520px | Full-width sections, landing pages |
CSS Custom Properties
Widgets use CSS custom properties inside Shadow DOM. You can override these from the host page by targeting the container element:
/* Override widget colors from your CSS */
#my-widget {
--ma-accent: #7c3aed; /* Custom accent color */
--ma-bg: #fafafa; /* Widget background */
--ma-text: #1a1a1a; /* Primary text */
--ma-text-secondary: #666; /* Secondary text */
--ma-border-color: #e0e0e0; /* Border color */
}| Property | Default (Light) | Default (Dark) |
|---|---|---|
| --ma-accent | #c2410c | #f97316 |
| --ma-bg | #ffffff | #1e1e1e |
| --ma-text | #1f2937 | #f3f4f6 |
| --ma-text-secondary | #6b7280 | #9ca3af |
| --ma-border-color | #e5e7eb | #374151 |
