Custom Themes

A theme is a stylesheet that belongs to a workspace. Apply it to a feedback form, an assessment, or a page, and its public render takes on your styling — participants and visitors see your look instead of the default one.

Themes are created per workspace and applied per item: one theme can style any number of forms, assessments, and pages, and every item picks which theme (if any) it uses.

Themes live under Tools → Themes in the workspace sidebar. Any workspace member can browse the list; creating and editing themes requires the Manage workspace permission. You can also generate a starting theme with AI — describe the look you're after and refine the result in the editor (each generation uses one AI generation from the monthly allowance).

The editor shows a live preview of your CSS and validates it as you type, including per-line errors. Home contains all ribbon controls: editing, preview, theme details, color modes and documentation, plus publication and discovery for library themes. Controls show current values; simple choices open menus and detailed settings open focused dialogs. Save and the tour button stay in the header. Search settings and actions from the field after the ribbon categories, or press Ctrl/Cmd-K. Collapse the tools sidebar from its own header.

To apply a theme in a form, standard or coding assessment, or page, open Design → Theme in the ribbon. The menu shows each theme's name and description, and the ribbon shows the selected theme. Choose Default to restore the standard appearance.

You write ordinary CSS — no wrapper syntax, no special dialect. When a theme is saved, the stylesheet is automatically sanitized and scoped so it can only affect the rendered form, assessment, or page it is applied to. You never add any scoping yourself.

:root, html, and body selectors are re-anchored to the themed region, so :root { --primary: … } overrides the design tokens for just that render — the quickest way to recolor everything at once.

For dark mode, target .amp-dark (e.g. .amp-dark .amp-card { … }). If you write .dark on a root selector it is mapped to .amp-dark automatically.

:root {
  --primary: oklch(0.55 0.22 275);
}

.amp-dark .amp-card {
  border-color: oklch(0.45 0.05 275);
}

Three kinds of hooks are stable API for theme authors: structural amp-* classes, data-slot attributes on UI primitives, and the design token CSS variables. Anything else — like utility class names you may spot in the markup — can change without notice.

Structural classes

Component attributes

Every shadcn UI primitive in the render carries a data-slot attribute you can target directly — a stable alternative to guessing at class names. A few of the most useful:

Design token variables

Design tokens are global CSS variables you can override from a :root { … } block in your theme. Color tokens are OKLch values.

Themes can replace the default question entrance animation with a spring-physics preset played by the app's own animation engine. You declare plain CSS variables on :root — the theme stays pure CSS, no scripting involved — and every question animates in with the chosen preset, staggered one after another.

Presets apply wherever questions enter the screen: the initial reveal on single-page assessments and forms, each step of a multi-step assessment, and every card in one-by-one mode. An unknown preset value is simply ignored and the default animation plays instead.

Presets

Variables

:root {
  --amp-motion: scale-in;
  --amp-motion-duration: 0.6s;
  --amp-motion-stagger: 90ms;
}

Three complete themes you can paste straight into the editor.

Brand colors & radius

Override design tokens on :root for light mode and .amp-dark for dark mode — the fastest way to make a render match your brand.

:root {
  --primary: oklch(0.5 0.2 300);
  --ring: oklch(0.5 0.2 300);
  --card: oklch(0.99 0.005 300);
  --radius: 1rem;
}

.amp-dark {
  --primary: oklch(0.78 0.16 300);
  --card: oklch(0.24 0.02 300);
  --border: oklch(0.35 0.03 300);
}

Neo-brutalist cards

Hard shadows, thick borders, and no blur — restyle the card, the title, and every button directly.

.amp-card {
  border: 3px solid oklch(0.2 0 0);
  border-radius: 0;
  box-shadow: 8px 8px 0 oklch(0.2 0 0);
}

.amp-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

[data-slot="button"] {
  border: 3px solid oklch(0.2 0 0);
  border-radius: 0;
  box-shadow: 4px 4px 0 oklch(0.2 0 0);
}

[data-slot="button"]:hover {
  translate: -2px -2px;
  box-shadow: 6px 6px 0 oklch(0.2 0 0);
}

Entrance animation & motion presets

A motion preset for the questions (see Motion presets above) combined with hand-rolled keyframes for the header — note the required theme- prefix on the keyframes name.

:root {
  /* Built-in spring entrance */
  --amp-motion: scale-in;
  --amp-motion-stagger: 90ms;
}

/* …or hand-rolled keyframes */
@keyframes theme-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.amp-header {
  animation: theme-rise 400ms ease-out both;
}

Export any theme as a .json file from its row menu on the Themes page, and bring it into another workspace with Import in the list toolbar.

Imported CSS is re-validated on import, so a theme file is held to exactly the same rules as CSS written in the editor.

The theme library lives inside each workspace. Choose Themes in the workspace sidebar to browse the collection; use the workspace switcher in the library header to change workspaces. Every theme includes live form, assessment and page previews.

Install theme adds it to the current workspace and marks it Installed in the catalog. The Installed page contains every workspace theme and provides creation, editing, import and export tools. When a newer library version is published, Updates appears in the sidebar with a count. Choose individual themes or Update all; existing forms, assessments and pages keep their theme references.

Updates are applied only when you request them. Saving a manual change to a linked theme makes it independent and stops future library updates, even if you later undo the changes. Library CSS is revalidated when installed or updated, and installation, updates and authoring require the Professional plan’s Custom Themes feature.