Skip to main content
SuperDoc’s UI is styled with CSS variables. createTheme() generates a class name that sets those variables; you apply the class to <html> and every SuperDoc surface picks it up: toolbar, comments, dropdowns, context menu, popovers.

​
The fast path

import { SuperDoc, createTheme } from 'superdoc';

const theme = createTheme({
  colors: {
    action: '#1355FF', // buttons, links, active states
    bg: '#ffffff',
    text: '#1f2937',
    border: '#d1d5db',
  },
  font: 'Inter, sans-serif',
  radius: '6px',
});

document.documentElement.classList.add(theme);

new SuperDoc({ selector: '#editor', document: 'contract.docx' });
theme is a className string. Apply it to <html> (not the editor container) so popovers, dropdowns, and the comments sidebar all pick up the same tokens. Some of those surfaces render outside the editor element.

​
What themes affect

Toolbar buttons, comments sidebar, dropdowns, context menu, search bar, dialog surfaces. Any chrome SuperDoc renders. The document content itself (paragraphs, headings, tables) renders with its own styles from the DOCX.

​
Optional layered stylesheet

By default, you can keep using: 
import 'superdoc/style.css';
If your app uses cascade layers and you want SuperDoc styles in a named layer, use the optional layered entrypoint: 
@layer reset, superdoc, app;
@import 'superdoc/style.layered.css';
@import 'your-app.css' layer(app);

​
When to drop to CSS variables

createTheme() covers the common case. For component-level overrides, use the vars option or set raw --sd-* variables in your stylesheet: 
const theme = createTheme({
  colors: { action: '#1355FF', bg: '#ffffff', text: '#1f2937', border: '#d1d5db' },
  vars: {
    '--sd-ui-toolbar-bg': '#f8fafc',
    '--sd-comments-resolved-bg': '#ecfdf5',
  },
});

​
Common pitfalls

  • Theme class on the wrong element. Add it to document.documentElement (the <html> tag), not the editor’s container. Popovers render at the body level and won’t pick up the theme otherwise.
  • CSP environments. createTheme() injects a <style> tag. If you serve with a strict CSP, use buildTheme() instead: it returns { className, css } so you can inject the CSS yourself with the right nonce.

​
Where to next