Theming

CSS properties for theming the default Puck user interface.

Properties

--puck-font-family

The font family used for the Puck interface. Must be used with the no-external bundle that stops Puck from loading the default font.

/* Load bundle without existing font */
@import "@measured/puck/no-external.css";
 
:root {
  --puck-font-family: Arial;
}

--puck-font-family-monospaced

The font family used for monospaced elements of the Puck interface.

/* Monospaced fonts don't use external files, so the default bundle is safe */
@import "@measured/puck/puck.css";
 
:root {
  --puck-font-family-monospaced: Menlo;
}