Domma Themes
Beautiful, consistent theming with light & dark modes across 11 colour families. Zero configuration required.

Choose a Theme

Click any theme to preview it instantly. Changes apply to the entire page.

Aa
Ocean
☀️ Light
Aa
Ocean
🌙 Dark
Aa
Forest
☀️ Light
Aa
Forest
🌙 Dark
Aa
Sunset
☀️ Light
Aa
Sunset
🌙 Dark
Aa
Royal
☀️ Light
Aa
Royal
🌙 Dark
Aa
Lemon
☀️ Light
Aa
Lemon
🌙 Dark
Aa
Silver
☀️ Light
Aa
Silver
🌙 Dark
Aa
Charcoal
☀️ Light
Aa
Charcoal
🌙 Dark
Aa
Christmas
❄️ Day
Aa
Christmas
🎄 Eve
Aa
Unicorn
☀️ Light
Aa
Unicorn
🌙 Dark
Aa
Dreamy
☀️ Light
Aa
Dreamy
🌙 Dark
Aa
Grayve
☀️ Light
Aa
Grayve
🌙 Dark
Aa
Mint
☀️ Light
Aa
Mint
🌙 Dark
Aa
Wedding
☀️ Day
Aa
Wedding
🌙 Evening
Aa
Core
☀️ Light only
Live preview

Switch themes above; every component on this page reflects your choice instantly.

Audit off

1. Branding & Surfaces

Brand colours (text on coloured background)
Primary
Secondary
Success
Warning
Danger
Info
Surface tokens (text on neutral backgrounds)
Background — body text
Surface — card text
Surface alt — subtle text
Surface raised — elevated text
Colour palette (every theme token)

2. Typography

H1 — Quarterly performance overview

H2 — Revenue grew 23% year on year

H3 — Engineering team headcount

H4 — Customer satisfaction up four points

H5 — Migration completed last Tuesday
H6 — Last updated by Darryl on 22 April 2026

Standard paragraph text — the rain in Spain falls mainly on the plain. This is a hyperlink with an inline strong, an inline emphasis, and some inline code. Visited links should also have legible colour.

"Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

Muted helper text — usually used for form hints or metadata.

Secondary text — slightly de-emphasised body copy.


const order = { id: 'INV-2026-0042', customer: 'Acme Ltd', total: 4250.00 };
Domma.http.post('/api/invoices', order).then(res => {
  E.toast('Invoice saved', { type: 'success' });
});

3. Buttons

Solid variants
Outline & size variants
Buttons with icons

4. Forms

Bare HTML inputs (.form-input)


F.create() — blueprint-driven form

5. Cards — header / footer combinations

Four standard combinations

Body only. No header, no footer. Just a single padded surface.

Header only

Header above, body below. No footer.

Body with a footer beneath. No header.

Header and footer

Full sandwich — header, body, and footer.

Hover & primary variants

Hover card

Hover the card to see the elevation effect adjust to the active theme.

card-primary

Solid primary-tinted card. Watch this one carefully on light themes — header text often breaks here.

Accent cards (left-border colour cue + label)

Primary card-accent

Default accent — uses --dm-primary for the left border.

Success card-accent-success

Tinted accent with a green left border. Use for confirmation and completion states.

Warning card-accent-warning

Yellow accent. Lemon-light theme has historically broken this combination.

Danger card-accent-danger

Red accent. Used for destructive confirmation flows.

Info card-accent-info

Blue accent. Mint-light historically had cyan-on-mint contrast issues here.

Collapsible card

Click the header to toggle. State persists to localStorage.

6. Badges, Pills & Number Badges

Badges
Primary Secondary Success Warning Danger Info
Pills
Primary pill Secondary pill Light pill Outline pill Outline primary Small Large
Number badges (notification counters)

7. Alerts

Primary alert. System maintenance scheduled for 02:00–04:00 on Sunday.
Success. All overnight CI jobs completed without errors.
Warning. Disk usage on prod-db-01 is at 85% — consider archiving older logs.
Danger. Webhook delivery to Stripe failed three consecutive times.
Info. A new release of Domma is available — see the changelog.

8. Tabs & Accordion

  • Overview
  • Activity
  • Settings

Tab content one — body text rendered inside the active panel. Headings, links and emphasised text should remain legible across all themes.

Tab content two — secondary tab. Inline link visibility check.

Tab content three — settings tab content.

Accordion body text. The chevron icon and the header background should both be readable.

Body of the second section.

9. Tables

Bare HTML table (.table)
IDCustomerStatusTotal
INV-0001Acme LtdPaid£4,250.00
INV-0002GlobexPending£1,180.00
INV-0003InitechOverdue£760.00
INV-0004Soylent CorpPaid£12,500.00
T.create() — sortable, searchable, paginated

10. Lists & List Groups

Standard lists
  • Onboarding session with the new client
  • Migrate legacy invoices to the new system
  • Review Q2 procurement reports
  1. Stage the migration
  2. Run the dry-run script
  3. Cut over and verify
API key
A unique identifier used to authenticate requests.
Rate limit
1,000 requests per hour, per key.
List group with colour variants
Q1 sales report
Selected item
Primary tinted
Success tinted
Warning tinted
Danger tinted
Info tinted
Disabled item

11. Navigation Components

Breadcrumbs
Pagination
Button group — single-select
Dropdown

12. Loaders & Progress

Spinner
Dots
Pulse
Bars
Progress bars
32%
Complete
67%
12%

13. Tooltips

14. Modals, Dialogs & Toasts

Trigger buttons
Inline modal (forced visible for inspection)

15. Slideovers

16. Autocomplete & Pillbox

Autocomplete
Pillbox (multi-select)

17. Progression — Timeline & Roadmap

Timeline mode
Roadmap mode (status colours)

18. Carousel

19. Code & quotes

Inline code: const x = Domma.theme.set('mint-light') should remain readable.

function audit() {
  const issues = [];
  document.querySelectorAll('*').forEach(el => {
    if (failsContrast(el)) issues.push(el);
  });
  return issues;
}

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