Theme Properties

This page lists all available CSS variables you can customize through the theme prop.

All Theme Properties

Borders

Property	Description	Default
`--mondrian-border-primary`	Main border color	`#d1d5db`
`--mondrian-border-separator`	Separator lines	`#ccc`

Backgrounds

Property	Description	Default
`--mondrian-bg-white`	White background	`#ffffff`
`--mondrian-bg-gray-100`	Light gray background	`#f3f4f6`
`--mondrian-bg-gray-200`	Medium gray background	`#e5e7eb`

Text Colors

Property	Description	Default
`--mondrian-text-black`	Primary text	`#000000`
`--mondrian-text-gray-400`	Light gray text	`#888`
`--mondrian-text-gray-500`	Medium gray text	`#6b7280`
`--mondrian-text-gray-700`	Dark gray text	`#374151`

Syntax Highlighting (Formula Bar)

Property	Description	Default
`--mondrian-syntax-prefix`	Formula prefix	`#aaa`
`--mondrian-syntax-range`	Cell range references	`#f7981d`
`--mondrian-syntax-number`	Numbers and booleans	`#1155cc`
`--mondrian-syntax-string`	String literals	`#1a7f37`

Selection & Interaction

Property	Description	Default
`--mondrian-highlight-stroke`	Selected cell border	`#217346`
`--mondrian-highlight-fill`	Selected cell background	`#c6efce`
`--mondrian-resizer-hover`	Column/row resize hover	`rgba(0, 0, 0, 0.1)`

Error States

Property	Description	Default
`--mondrian-error-red`	Error messages	`#dc2626`

Layout

Property	Description	Default
`--mondrian-border-radius`	Main border radius	`8px`
`--mondrian-border-radius-sm`	Small border radius	`4px`

Usage

Pass any of these properties in the theme prop:

<SpreadsheetViewer
  model={model}
  theme={{
    "--mondrian-highlight-stroke": "#3b82f6",
    "--mondrian-highlight-fill": "#dbeafe",
    "--mondrian-border-radius": "12px",
  }}
/>

For examples and common theme configurations, see the Theming Guide.