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/spreadsheet-viewer";

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.