Custom themes

import { createTheme } from 'superdoc';

const theme = createTheme({
  name: 'my-brand',
  font: 'Inter, sans-serif',
  radius: '8px',
  shadow: '0 2px 8px rgba(0,0,0,0.1)',
  colors: {
    action: '#6366f1',        // buttons, links, active states
    actionHover: '#4f46e5',
    actionText: '#ffffff',    // text on action buttons
    bg: '#ffffff',             // panels, cards, dropdowns
    hoverBg: '#f1f5f9',       // hover backgrounds
    activeBg: '#e2e8f0',      // active/pressed backgrounds
    disabledBg: '#f5f5f5',
    text: '#1e293b',           // primary text
    textMuted: '#64748b',      // secondary text
    textDisabled: '#94a3b8',
    border: '#e2e8f0',
  },
  // Escape hatch: any --sd-* CSS variable
  vars: {
    '--sd-ui-toolbar-bg': '#f8fafc',
    '--sd-ui-comments-card-bg': '#f0f0ff',
  },
});

document.documentElement.classList.add(theme);

import { createTheme } from 'superdoc';

const dark = createTheme({
  name: 'dark',
  colors: {
    bg: '#1a1a2e',
    hoverBg: '#2a2a3e',
    activeBg: '#3a3a4e',
    text: '#e2e8f0',
    textMuted: '#94a3b8',
    border: '#334155',
    action: '#60a5fa',
    actionHover: '#93c5fd',
    actionText: '#0f172a',
  },
  vars: {
    '--sd-ui-toolbar-bg': '#0f172a',
    '--sd-ui-toolbar-button-text': '#e2e8f0',
    '--sd-ui-comments-card-bg': '#1e293b',
    '--sd-ui-comments-body-text': '#cbd5e1',
  },
});

document.documentElement.classList.add(dark);

.dark-theme {
  --sd-ui-bg: #1a1a2e;
  --sd-ui-hover-bg: #2a2a3e;
  --sd-ui-active-bg: #3a3a4e;
  --sd-ui-text: #e2e8f0;
  --sd-ui-text-muted: #94a3b8;
  --sd-ui-border: #334155;
  --sd-ui-action: #60a5fa;
  --sd-ui-action-hover: #93c5fd;
  --sd-ui-action-text: #0f172a;

  /* Toolbar */
  --sd-ui-toolbar-bg: #0f172a;
  --sd-ui-toolbar-button-text: #e2e8f0;
  --sd-ui-toolbar-button-hover-bg: #1e293b;
  --sd-ui-toolbar-button-active-bg: #334155;

  /* Dropdowns */
  --sd-ui-dropdown-bg: #1e293b;
  --sd-ui-dropdown-border: #334155;
  --sd-ui-dropdown-hover-bg: #2d3a4e;

  /* Comments */
  --sd-ui-comments-card-bg: #1e293b;
  --sd-ui-comments-card-active-bg: #0f172a;
  --sd-ui-comments-input-bg: #1e293b;
  --sd-ui-comments-author-text: #e2e8f0;
  --sd-ui-comments-body-text: #cbd5e1;
  --sd-ui-comments-timestamp-text: #64748b;
}

.word-like-redlines {
  --sd-tracked-changes-insert-border-width: 0px;
  --sd-tracked-changes-insert-background: transparent;
  --sd-tracked-changes-insert-text: #bf3848;
  --sd-tracked-changes-insert-decoration-line: underline;
  --sd-tracked-changes-insert-decoration-thickness: 1.5px;
  --sd-tracked-changes-insert-underline-offset: 2px;

  --sd-tracked-changes-delete-border-width: 0px;
  --sd-tracked-changes-delete-background: transparent;
  --sd-tracked-changes-delete-text: #2e64a8;
  --sd-tracked-changes-delete-decoration-thickness: 1.5px;
}