Creating Custom Themes with defineTheme()
Programmatically register custom themes at runtime or in build steps with automated WCAG contrast verification.
You can author new themes dynamically using defineTheme():
defineTheme('midnight-emerald', { radius: '16px', blur: '20px', saturate: '160%', light: { bg: 'rgba(255, 255, 255, 0.8)', solid: '#ffffff', fg: '#064e3b', muted: '#047857', border: 'rgba(6, 78, 59, 0.15)', shadow: '0 8px 32px rgba(6, 78, 59, 0.08)', accent: '#059669', accentFg: '#ffffff', danger: '#dc2626', dangerFg: '#ffffff', success: '#059669', error: '#dc2626', warning: '#d97706', info: '#2563eb', }, dark: { bg: 'rgba(6, 78, 59, 0.45)', solid: '#064e3b', fg: '#ecfdf5', muted: '#a7f3d0', border: 'rgba(255, 255, 255, 0.15)', shadow: '0 8px 32px rgba(0, 0, 0, 0.4)', accent: '#10b981', accentFg: '#064e3b', danger: '#ef4444', dangerFg: '#ffffff', success: '#10b981', error: '#ef4444', warning: '#f59e0b', info: '#38bdf8', }, });
ui.configure({ theme: 'midnight-emerald' });
`
Want to test these options live?
Launch the interactive playground to experiment with themes, positions, and live generators.