Theming overview

Set your brand colors in JavaScript and every SuperDoc component updates: toolbar, comments, dropdowns, everything. For a five-minute walkthrough, see Getting Started > Theming.

import { createTheme } from 'superdoc';

const theme = createTheme({
  colors: { action: '#6366f1', bg: '#ffffff', text: '#1e293b', border: '#e2e8f0' },
  font: 'Inter, sans-serif',
});

document.documentElement.classList.add(theme);

Five properties theme the entire UI.

`createTheme()`

Pass a config object, get back a CSS class name. Apply it to <html>.

import { createTheme } from 'superdoc';

const theme = createTheme({
  name: 'my-brand',               // optional: generates sd-theme-my-brand
  font: 'Inter, sans-serif',
  radius: '8px',
  colors: {
    action: '#6366f1',             // buttons, links, active states
    actionHover: '#4f46e5',
    bg: '#ffffff',                 // panels, cards, dropdowns
    text: '#1e293b',               // primary text
    textMuted: '#64748b',          // secondary text
    border: '#e2e8f0',             // all borders
  },
  // Escape hatch: any CSS variable
  vars: {
    '--sd-ui-toolbar-bg': '#f8fafc',
    '--sd-ui-comments-card-bg': '#f0f0ff',
  },
});

document.documentElement.classList.add(theme);

colors controls the semantic tier: every component inherits from it. The vars escape hatch lets you set any --sd-* CSS variable directly for fine-grained control.

SSR support

Use buildTheme() to get the raw CSS string for server-side rendering:

import { buildTheme } from 'superdoc';

const { className, css } = buildTheme({
  colors: { action: '#6366f1', bg: '#ffffff', text: '#1e293b' },
});

const html = `
  <html class="${className}">
    <head><style>${css}</style></head>
    <body><div id="editor"></div></body>
  </html>
`;

Preset themes

Three presets ship out of the box. Add the class to <html>: some SuperDoc elements (popovers, dropdowns) are appended to <body>, so they need to inherit from <html>.

Docs

Google Docs aesthetic. Clean blues, compact toolbar, subtle shadows.

<html class="sd-theme-docs">

Word

Microsoft Word aesthetic. Fluent-style borders and surfaces.

<html class="sd-theme-word">

Blueprint

High-contrast technical preset. Teal accents, structured layout.

<html class="sd-theme-blueprint">

CSS variables (advanced)

createTheme() generates CSS variables under the hood. You can also set them directly:

:root {
  --sd-ui-action: #6366f1;
  --sd-ui-bg: #ffffff;
  --sd-ui-text: #1e293b;
  --sd-ui-border: #e2e8f0;
  --sd-ui-font-family: Inter, sans-serif;
}

See the full variable reference for every token.

Next steps

Custom themes guide

Full API reference, dark theme starter, all CSS variables by component.

Migration guide

Old-to-new variable name mapping. Backward compatibility details.

Getting Started

Editor

Document Engine

AI

Solutions

Resources

`createTheme()`

SSR support

Preset themes

Docs

Word

Blueprint

CSS variables (advanced)

Next steps

Custom themes guide

Migration guide

​createTheme()

​SSR support

​Preset themes

Docs

Word

Blueprint

​CSS variables (advanced)

​Next steps

Custom themes guide

Migration guide

`createTheme()`

SSR support

Preset themes

CSS variables (advanced)

Next steps