Theming

The SpreadsheetViewer component supports full customization through a theme prop. You can override any of the CSS variables to match your application’s design.

Interactive Demo

Usage

Pass a theme object with CSS variable overrides:

import { SpreadsheetViewer } from "@grid-is/mondrian-react";

function App() {
  const model = /* your Model instance */;

  return (
    <div style={{ height: "600px" }}>
      <SpreadsheetViewer
        model={model}
        theme={{
          '--mondrian-highlight-stroke': '#3b82f6',
          '--mondrian-highlight-fill': '#dbeafe',
          '--mondrian-border-radius': '12px',
        }}
      />
    </div>
  );
}

Available Theme Properties

All theme properties are optional. Below is a complete list organized by category.

Borders

• --mondrian-border-primary - Main border color (default: #d1d5db)
• --mondrian-border-separator - Separator lines (default: #ccc)

Backgrounds

• --mondrian-bg-white - White background (default: #ffffff)
• --mondrian-bg-gray-100 - Light gray background (default: #f3f4f6)
• --mondrian-bg-gray-200 - Medium gray background (default: #e5e7eb)

Text Colors

• --mondrian-text-black - Primary text (default: #000000)
• --mondrian-text-gray-400 - Light gray text (default: #888)
• --mondrian-text-gray-500 - Medium gray text (default: #6b7280)
• --mondrian-text-gray-700 - Dark gray text (default: #374151)

Syntax Highlighting (Formula Bar)

• --mondrian-syntax-prefix - Formula prefix (default: #aaa)
• --mondrian-syntax-range - Cell range references (default: #f7981d)
• --mondrian-syntax-number - Numbers and booleans (default: #1155cc)
• --mondrian-syntax-string - String literals (default: #1a7f37)

Selection & Interaction

• --mondrian-highlight-stroke - Selected cell border (default: #217346)
• --mondrian-highlight-fill - Selected cell background (default: #c6efce)
• --mondrian-resizer-hover - Column/row resize hover (default: rgba(0, 0, 0, 0.1))

Error States

• --mondrian-error-red - Error messages (default: #dc2626)

Layout

• --mondrian-border-radius - Main border radius (default: 8px)
• --mondrian-border-radius-sm - Small border radius (default: 4px)

Examples

Dark Theme

<SpreadsheetViewer
  model={model}
  theme={{
    '--mondrian-bg-white': '#1f2937',
    '--mondrian-bg-gray-100': '#374151',
    '--mondrian-bg-gray-200': '#4b5563',
    '--mondrian-text-black': '#f9fafb',
    '--mondrian-text-gray-400': '#d1d5db',
    '--mondrian-text-gray-500': '#9ca3af',
    '--mondrian-border-primary': '#4b5563',
    '--mondrian-border-separator': '#6b7280',
  }}
/>

Brand Colors

<SpreadsheetViewer
  model={model}
  theme={{
    '--mondrian-highlight-stroke': '#7c3aed',
    '--mondrian-highlight-fill': '#ede9fe',
    '--mondrian-syntax-range': '#7c3aed',
  }}
/>

Reference

For a complete alphabetical list of all theme properties with their default values, see the Theme Properties Reference.