Themes

Themes are named visual systems, not bags of unrelated defaults. They coordinate typography, palette, spacing, axes, labels, geometry, and background as one design decision. Omit theme to use editorial.

All themes

Every theme has designed Light and Dark variants. config.theme selects the visual system; presentation.colorScheme independently selects which scheme it renders. A theme name never implies a scheme, so noir can render in Light and soft can render in Dark.

Which theme for what

Start with the destination and reading context. editorial is the broad default. clean works well inside product UI. technical supports denser dashboards. soft suits approachable consumer reporting. noir is restrained, while loud carries stronger contrast and emphasis.

Theme choice does not change data semantics, scale validity, or chart-family behavior.

Try them

The selector below updates the shared docs preview. Change the site appearance to compare the selected theme in Light and Dark. Open the code to see that the chart requests System explicitly rather than deriving presentation from the theme name.

Themes supply default axis lines and plot borders. Override their visibility with axis preferences and plotBorder on any plan; their stroke color and width are theme overrides.

Presentation mode

Presentation belongs to ChartDocument, beside config and data. It controls the rendered color scheme and canvas background without changing what the chart means.

{
  "presentation": {
    "colorScheme": "system",
    "systemFallback": "light",
    "background": "opaque"
  }
}

Omitting presentation resolves to opaque Light, which is how new web and Figma charts start. When presentation is authored, background is required; System additionally requires systemFallback, while fixed Light and Dark do not accept it. Choose System when an interactive chart should follow its environment; systemFallback keeps PNG and SVG output deterministic.

background: "transparent" removes the canvas fill. Typography, axes, labels, marks, and tooltips still resolve against the selected Light or Dark theme, so transparency does not turn the chart into a scheme-neutral graphic.

Color palettes

Each theme owns an ordered categorical palette and sampled sequential and diverging palettes for both schemes. Sequential palettes use a designed middle color between their endpoints. Diverging palettes use one chromatic shoulder on each side of a neutral midpoint, keeping direction visible closer to that midpoint.

Use explicit color.range only when colors carry fixed meaning or must match another system. Otherwise let the theme preserve contrast and balance.

Customizing

themeOverrides changes specific properties while preserving the rest of the selected system.

{
  "theme": "editorial",
  "themeOverrides": {
    "colors": {
      "categorical": ["#23314c", "#b84233", "#c2902f"]
    },
    "fonts": {
      "body": "IBM Plex Sans",
      "title": "IBM Plex Sans",
      "numeric": "IBM Plex Mono"
    },
    "typography": { "baseSize": 14 },
    "axes": { "gridLineWidth": 1 }
  }
}

Font, typography, and axis overrides apply in both schemes. Authored paint can use one value in both schemes or provide Light and Dark values independently.

Author colors for each scheme

An individual color can be a plain string that applies in both Light and Dark:

"#23314c"

Use an object when the schemes need different paint:

{ "light": "#23314c", "dark": "#9db8e8" }

This shape works for individual authored colors, including backgrounds, titles, marks, point fills, strokes, reference lines, annotation text, and entries in chart-level color ranges.

Theme palette and continuous-range overrides select a complete array for each scheme. A sequential override accepts two endpoint colors or adds one designed middle color. A diverging override accepts its low endpoint, midpoint, and high endpoint, with two optional inner colors around the midpoint. Use one array in both schemes, or wrap the complete Light and Dark arrays in the same object shape. Light and Dark may choose their supported range lengths independently.

{
  "theme": "editorial",
  "themeOverrides": {
    "colors": {
      "background": {
        "light": "#fbfaf8",
        "dark": "#17191d"
      },
      "categorical": {
        "light": ["#23314c", "#b84233", "#c2902f"],
        "dark": ["#9db8e8", "#ff8f7d", "#f0c66b"]
      },
      "title": {
        "light": "#191714",
        "dark": "#f6f2eb"
      }
    }
  }
}

Each Light/Dark object requires at least one member. When an individual color omits the active scheme, the selected theme supplies that color. When a theme palette or continuous range omits the active scheme, the theme supplies that complete palette or range. Szum does not combine an authored palette with theme colors index by index.

For System presentation, Review suggests completing a scalar color that has only one scheme member. The chart remains valid and uses the theme fallback for the missing member.

Editing Light and Dark

The web editor previews the scheme being authored. In the theme editor, a fixed Light or Dark chart shows the corresponding color controls. A System chart shows Light and Dark colors side by side while retaining one static fallback for deterministic exports.

Editing one scheme never silently rewrites the other. If an existing color was authored as one shared string, the editor preserves that value for the other scheme before writing the changed member. Clearing one member restores the selected theme’s value for that scheme and keeps the other member intact.

When a fixed-scheme chart changes to System, Szum pins its existing authored colors to the scheme they were created for. The other scheme starts from the theme rather than assuming those colors work on both backgrounds.

Plans and saved charts

Separate Light and Dark values do not introduce another plan requirement. A color keeps the availability of the field that contains it.

All six built-in themes and their Light and Dark variants are available on every plan. themeOverrides require Creator, Pro, or Team on hosted render and publication surfaces. Existing saved documents keep authored overrides after a downgrade. Hosted delivery keeps them for 30 days after a paid plan ends, then uses the built-in theme until an upgrade restores them.

Shared themes

A Team workspace can keep its own themes: a built-in theme with the workspace’s customization, saved under a name. Admins create and edit them on the Themes tab in Studio, and everyone in the workspace can use them in the web editor, the Figma plugin, the API, and MCP.

A chart that uses a shared theme stays linked to it. Its document keeps a copy of the theme’s values, so exports and older clients still render it, while its published image and embed always use the theme’s current values. Customizing a linked chart, or choosing another theme, gives the chart its own copy and ends the link.

Admins choose the theme new charts start in, at the top of the Themes tab: one of the workspace’s shared themes or one of Szum’s. New charts start in it in the web editor and the Figma plugin, and through the API and MCP when the document sets neither theme nor themeOverrides; a shared default links them. A chart that sets its own theme keeps it, and replacing a document never moves a chart into the default. While Charts use allowed themes is on, the default is always one of the allowed themes, so the default theme can’t be deleted until another takes its place.

API and MCP callers name a shared theme with sharedTheme; see saved charts and MCP. Deleting a theme that charts still use retires it: it leaves the pickers, and those charts keep their look.

Available fonts

The themes use a curated set of default fonts:

Any Google Font

With Creator, Pro, or Team, set fonts.body, fonts.title, or fonts.numeric to any supported Google Font family. Szum validates the name and uses the required weights in server and browser output. Figma keeps text editable when its editor has the font; a missing font may be substituted, with a warning if the chart can still be imported.

When a font is missing characters, Szum uses a theme-matched alternative for supported languages, so your chart keeps its visual style. Set locale to the chart’s language for appropriate regional character forms.

Use typography overrides sparingly. A theme’s spacing and weight choices were designed around its default typography; changing one family may require related size or weight adjustments.

All properties