Theming

morphscreen.css, in the web SDK, styles answers and nothing else. Load it once on the page that shows them.

#In your page

The SDK puts ms-answer on the element it draws into, and every rule sits inside it, so the rest of your page looks the same with or without it. Every class an answer uses starts with ms- (ms-card, ms-btn), so Bootstrap's or daisyUI's .card and .btn never reach an answer, and ours never reach your page. Your own components inside an answer keep your styles.

We check this on every change: 73 answers in pages built with Tailwind and shadcn/ui, Bootstrap and MUI, light and dark, compared element by element with and without the answer.

#Light, dark and mono

Answers follow the reader's system setting. Pin one with data-theme="light" or data-theme="dark" on <html>; data-theme="mono" is a greyscale palette.

#Your colours

Every colour is a token starting --ms-, so yours and ours never collide. Set them on :root:

:root {
  --ms-accent: #2f6fde;
  --ms-ink: #1b1d22;
}

Keep text at 4.5:1 against its ground: every token is checked against that in all three palettes.

#Your faces

Answers are set in IBM Plex Sans, with IBM Plex Mono for code, served from the package, never from a font host. To use your app's own:

:root {
  --ms-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ms-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#A whole theme

@morphscreen/web/theme applies a W3C Design Tokens file, light and dark, to every component: colours, faces, sizes and corners (its reference).

#Motion

Components arrive with short morphs: a chart grows as its rows stream in, a quiz choice turns into a check or a cross, numbers count up. With prefers-reduced-motion: reduce, nothing moves.