Choose a Theme
Click any theme to preview it instantly. Changes apply to the entire page.
Ocean
Aa
Ocean
☀️ Light
Aa
Ocean
🌙 Dark
Forest
Aa
Forest
☀️ Light
Aa
Forest
🌙 Dark
Sunset
Aa
Sunset
☀️ Light
Aa
Sunset
🌙 Dark
Royal
Aa
Royal
☀️ Light
Aa
Royal
🌙 Dark
Lemon
Aa
Lemon
☀️ Light
Aa
Lemon
🌙 Dark
Silver
Aa
Silver
☀️ Light
Aa
Silver
🌙 Dark
Charcoal
Aa
Charcoal
☀️ Light
Aa
Charcoal
🌙 Dark
Christmas
Aa
Christmas
❄️ Day
Aa
Christmas
🎄 Eve
Unicorn
Aa
Unicorn
☀️ Light
Aa
Unicorn
🌙 Dark
Dreamy
Aa
Dreamy
☀️ Light
Aa
Dreamy
🌙 Dark
Grayve
Aa
Grayve
☀️ Light
Aa
Grayve
🌙 Dark
Mint
Aa
Mint
☀️ Light
Aa
Mint
🌙 Dark
Wedding
Aa
Wedding
☀️ Day
Aa
Wedding
🌙 Evening
Special
Aa
Core
☀️ Light only
Component Preview
See how components look with the selected theme.
Buttons
Alerts
Success! Operation completed.
Error! Something went wrong.
Warning! Please review.
Info: Updates available.
Form Elements
Nested Card
Card Title
This card demonstrates nested surfaces and proper contrast.
Colour Palette
Current theme colours update as you switch themes.
Usage
CSS Only
<!-- Include themes CSS -->
<link rel="stylesheet" href="domma-themes.css">
<!-- Apply via class -->
<body class="dm-theme-grayve-dark">
JavaScript API
// Initialise with a theme
Domma.theme.init({
theme: 'grayve-dark',
autoDetect: true
});
// Switch at runtime
Domma.theme.set('ocean-light');
// Query current state
Domma.theme.get(); // 'grayve-dark'
Domma.theme.getBase(); // 'grayve'
Domma.theme.isDark(); // true