Skip to content

theming.mdx

Latest commit

 

History

History
75 lines (54 loc) · 2.72 KB

theming.mdx

File metadata and controls

75 lines (54 loc) · 2.72 KB
title Theme SuperDoc
sidebarTitle Theming
keywords theming, css variables, custom theme, dark mode, design tokens, branding, createTheme

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