Formulon

English

日本語

English

日本語

Appearance

Theming ​

Import @libraz/formulon-cell/styles.css once, then choose a built-in theme or provide a small set of CSS variable overrides. The same theme follows the grid, formula bar, menus, and dialogs mounted for that spreadsheet.

Built-in themes ​

ThemeUse it for
paperLight application layouts; this is the default.
inkDark application layouts.
contrastHigh-contrast layouts with stronger boundaries.
ts
instance.setTheme('paper')
instance.setTheme('ink')
instance.setTheme('contrast')

themeChange fires after setTheme(). Persist the name in the host when the user's choice should survive the next mount.

Switch theme and locale at runtime

Change the mounted sheet’s theme and language in place. A language switch moves the UI dictionary and the calculation profile together, so function names, argument separators, and decimal marks change while the stored formula stays the same.

Powered by the real Formulon engine (WASM) — it runs entirely in your browser, nothing is uploaded.

Application and workbook themes ​

paper, ink, and contrast are application themes. instance.setTheme() changes the grid, ribbon, formula bar, menus, and dialogs for the mounted surface; it does not edit workbook metadata.

The Page Layout ribbon has separate workbook theme presets, office and gray. They edit the workbook's theme colors and major/minor fonts, persist through workbook save, and each preset action has its own undo/redo entry. A workbook theme therefore can change while the application remains on paper, ink, or contrast.

Use a brand theme ​

Any string can be used as a theme name. A custom name requires a complete CSS palette; it does not inherit paper, ink, or contrast. The common recipe keeps the built-in paper theme and scopes brand overrides to a host-owned wrapper:

css
.report-editor .fc-host[data-fc-theme="paper"],
.report-editor .fc-overlay-portal[data-fc-theme="paper"] {
  --fc-accent: #7c3aed;
  --fc-accent-strong: #6d28d9;
  --fc-accent-soft: color-mix(in srgb, var(--fc-accent) 12%, transparent);
  --fc-bg-rail: #f5f3ff;
  --fc-rule: #ddd6fe;
}
ts
const instance = await Spreadsheet.mount(host, {
  workbook,
  ui: { theme: 'paper' },
  overlays: { root: overlayPortal },
})

Place overlayPortal inside the same .report-editor wrapper. This applies the overrides to menus and dialogs outside the grid subtree while keeping them scoped to this spreadsheet.

Public grid tokens ​

The supported token names are declared in styles/tokens.css. Common groups are:

GroupExample tokensAffects
Surfaces--fc-bg, --fc-bg-elev, --fc-bg-rail, --fc-bg-header, --fc-bg-hoverGrid and surrounding control backgrounds.
Text--fc-fg, --fc-fg-strong, --fc-fg-mute, --fc-fg-faintCell and supporting text.
Lines--fc-rule, --fc-rule-strong, --fc-rule-softGridlines and separators.
Headers--fc-header-bg, --fc-header-ruleRow and column header fill and the rule between header cells. They default to --fc-bg-rail and --fc-rule; the Mac platform sets its own values.
Selection--fc-accent, --fc-accent-strong, --fc-accent-soft, --fc-selection-fillFocus and selected ranges.
Cell values--fc-cell-error-fg, --fc-cell-formula-fg, --fc-cell-bool-fg, --fc-cell-num-fgValue-specific text colors.
Typography--fc-font-ui, --fc-font-mono, --fc-text-cell, --fc-cell-text-size, --fc-text-headerFonts and cell sizing. --fc-cell-text-size is the size the grid and the in-cell editor actually use and defaults to --fc-text-cell; the Mac platform sets it to 16px (12 pt), so override it there.
Dialog surfaces--fc-radius-md, --fc-shadow-8, --fc-shadow-16Floating controls and dialogs.

Override tokens directly on .fc-host. Apply the same overrides to its .fc-overlay-portal when controls are outside the host subtree; the portal copies the theme name, not host-scoped CSS variable overrides. An ancestor selector can scope those rules, but setting only ancestor variables does not override the bundled host declarations. Host CSS outside the package's cascade layers can override the default values.

css
.report-editor .fc-host,
.report-editor .fc-overlay-portal {
  --fc-font-ui: "Inter", system-ui, sans-serif;
  --fc-text-cell: 14px;
  --fc-bg-rail: #f8fafc;
  --fc-accent: #0f766e;
}

The page view tokens (--fc-page-*), menu icon tokens, motion tokens, and full token list are available in styles/tokens.css. Token names outside that file are implementation details.

Coordinate a separate ribbon ​

The ribbon reads its own --fc-tb-* tokens; Ribbon toolbar explains which follow the grid accent and how to theme a separate toolbar.

Overlay and modal colors ​

Dialogs and menus receive the theme name through their overlay root. The portal does not automatically inherit host-scoped CSS variable overrides. If the spreadsheet is inside a native <dialog>, a fullscreen element, or an application modal, set overlays.root to that element so the floating UI stays inside the same visual boundary. The Modal and overlay guide covers placement; the token names remain the same.