Extending PuckTheming

Theming

Puck’s default interface is styled with CSS custom properties (design tokens). You can override these tokens to create a custom theme that matches your brand or product, or to implement dark mode.

See the theming API reference for the full list of tokens:

Global tokens: Tokens that restyle the whole interface at once.
Action bar: Tokens that style the action bar shown when selecting a component.
Button: Tokens that style the text buttons.
Canvas: Tokens that style the canvas preview area.
Drawer: Tokens that style the component drawer.
Fields: Tokens that style the puck fields.
Header: Tokens that style the editor header.
Icon button: Tokens that style the icon buttons.
Outline: Tokens that style the outline panel.
Plugin bar: Tokens that style the side navigation for switching plugins.
Sidebar: Tokens that style the left and right sidebar panels.
Slot: Tokens that style the slots.
Computed values: Tokens that define default computed values for all component-level tokens.

Applying a theme

To apply a theme override the token you want in any element above the editor in the DOM tree:

@import "@puckeditor/core/puck.css";
 
.Container {
  --puck-color-interactive: #0f5fff;
  --puck-radius-m: 8px;
}

Global tokens

Global tokens restyle the whole interface at once, covering color, spacing, radius, motion and typography.

For example, to change the palette to match the interactive colors of your brand:

.Container {
  --puck-color-interactive: #0d9488;
  --puck-color-interactive-hover: #0f766e;
  --puck-color-interactive-active: #115e59;
  --puck-color-interactive-subtle: #ccfbf1;
  --puck-color-interactive-soft: #f0fdfa;
  --puck-color-interactive-soft-hover: #ccfbf1;
  --puck-color-focus-ring: #14b8a6;
  --puck-color-selection-bg: color-mix(in srgb, #14b8a6 20%, transparent);
  --puck-color-selection-border: #14b8a6;
  --puck-slot-component-color-placeholder: #99f6e4;
  --puck-slot-component-color-border-dragging: #5eead4;
}

The API reference lists where each global token is used.

Component tokens

When you need finer control, component tokens restyle a single part of the UI and override global tokens.

For example, to set the header and plugin bar background:

.Container {
  --puck-header-color-bg: #fff4e6;
  --puck-pluginbar-color-bg: #fff4e6;
}

Load your own font file

By default, Puck loads the Inter typeface family from a CDN. To host your own copy of Inter, or load a different font file, switch Puck to the no-external runtime bundle:

/* @import "@puckeditor/core/puck.css"; */
@import "@puckeditor/core/no-external.css";

Going further

CSS tokens restyle the default interface. To change its behavior or visuals not covered by tokens, use the composition or UI overrides APIs.