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; those controls are available on every plan. Axis lines and the border share the theme's stroke color and width. Customizing these tokens remains theme customization.

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. When presentation is authored, background is required; System additionally requires systemFallback, while fixed Light and Dark do not accept it. Web and Figma starters author System explicitly so that interactive output can follow its environment while PNG and SVG output remain 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 or Pro on hosted render and publication surfaces. Existing saved documents keep authored overrides after a downgrade; hosted delivery temporarily uses the built-in theme and restores permitted overrides after an upgrade.

Available fonts

The themes use a curated set of default fonts:

Any Google Font

Creator and Pro can 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