Styling the editor

Blok’s stylesheet is scoped under a single root class and uses CSS variables for all user-overridable tokens.

Import, once

import "@useblok/core/styles.css";

Do this once in your app’s top-level layout. The sheet is self-contained — it won’t leak styles onto non-editor parts of your app.

CSS variables

Override any of these in a parent selector (or :root) to re-theme the editor:

.my-app-shell {
  --blok-color-bg:          #0b0b0d;
  --blok-color-bg-elevated: #17171b;
  --blok-color-border:      #2a2a30;
  --blok-color-text:        #f4f4f5;
  --blok-color-muted:       #9ca3af;
  --blok-color-accent:      #6366f1;
 
  --blok-radius-sm: 6px;
  --blok-radius-md: 10px;
 
  --blok-font-body: ui-sans-serif, system-ui, -apple-system, sans-serif;
  --blok-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

Sizing

<Blok> fills its container. To constrain it:

<div style={{ height: "90vh", border: "1px solid #eee" }}>
  <Blok config={config} />
</div>

For full-viewport editing, make sure the parent chain (html, body, containing layout) has height: 100% or equivalent.

Dark mode

Blok follows prefers-color-scheme by default. To force a mode, set the CSS variables yourself (see above) — there’s no built-in theme toggle, since most apps want their own.

Customising block icons / accents

Each component’s icon tile can be tinted:

Hero: {
  accent: "#13a58f",
  icon: <Sparkles size={16} />,
  // ...
}

Overriding rails / panels

If you want a completely custom UI, use headless mode instead of trying to CSS-over the built-in rails.