mdxui.dev
npm7.0.0-alpha.0
Spec: Written ahead of the package. Not in 7.0.0-alpha.0: renderWithTheme7.0.0-alpha.0

Theme playground

Edit paper, ink, accent, rule and plate over a real render with the published compileTheme, then copy the Theme object.

Start from
Colors

Clear a field to see what compileTheme says about a missing core role.

Radius
Policies render at build

Dividers, markers, featured and icons change markup, so they come from the render, which is quaypoint’s. Policies

Contrast
ink on paper16.0:1AAA
accent on paper4.78:1AA
accent-ink on accent5.18:1AA
plate-ink on plate15.2:1AAA
Vanroster › home · quaypoint’s markup
Theme object
import { THEMES, compileTheme, type Theme } from '@mdxui/themes';

const base = THEMES.quaypoint.theme;
…

Renders through compileTheme and renderBlock. renderPage takes the five shipped Themes.

How it runs

  • The first edit loads @mdxui/themes, at most 17 KB gzipped, and runs compileTheme on your draft.
  • The output replaces the frame's <style data-theme>, which the build wraps around the render's own compileTheme string. Nothing else in the frame changes.
  • A field compileTheme refuses shows its message in place. Clear a color to see the refusal for a missing core role.
  • Dividers, markers, featured and icons change markup, so they come from the Theme you start from. Policies shows each as two renders.
  • The contrast readouts are WCAG 2 ratios of the draft's resolved roles.

Next steps