Usage
// Initialise Theme Roller
const roller = Domma.elements.themeRoller(
'#container', {
baseTheme: 'light',
showPresets: true,
livePreview: true
});
// Get/Set values
roller.set('--dm-primary', '#ff6b6b');
roller.get('--dm-primary');
// Export options
roller.download('my-theme');
roller.copyToClipboard();
roller.saveToStorage();
// Reset to defaults
roller.reset();
Features
- Live preview of all changes
- Colour picker for all colour variables
- Sliders for sizing and spacing
- Preset theme loading
- Light/Dark mode toggle
- Download CSS file
- Copy CSS to clipboard
- Save to browser storage
Categories
- Colours: Brand, status, backgrounds, text, borders
- Typography: Font families, sizes
- Spacing: Spacing scale values
- Borders: Border radius options
- Transitions: Animation durations
- States: Interactive state styles