Themes

Chart themes style paper, ink, axes, type, and interaction chrome. Compose a declaration-only child under <GGPlot> — a named shell such as <ThemeMinimal />, or the generic <Theme name={…} /> escape hatch. Themes do not encode data colors; those come from palette schemes on color scales.

Visual portraits of every built-in live on the Themes showcase.

Components

Named shells fix the base theme. Every shell accepts the same optional role overrides as props (ink, paper, tooltipPaper, …). The generic <Theme> also accepts name for a reactive base.

PortableSpec name	Svelte component	Notes
`(dynamic)`	`Theme`	Escape hatch: `name` + role overrides.
`default`	`ThemeDefault`	Named base.
`light`	`ThemeLight`	Named base.
`dark`	`ThemeDark`	Named base.
`minimal`	`ThemeMinimal`	Named base.
`ggplot2`	`ThemeGgplot2`	Named base.
`classic`	`ThemeClassic`	Named base.
`bw`	`ThemeBw`	Named base.
`hrbr`	`ThemeHrbr`	Named base.
`few`	`ThemeFew`	Named base.
`clean`	`ThemeClean`	Named base.
`fivethirtyeight`	`ThemeFivethirtyeight`	Named base.
`economist`	`ThemeEconomist`	Named base.
`tufte`	`ThemeTufte`	Named base.
`linedraw`	`ThemeLinedraw`	Named base.
`void`	`ThemeVoid`	Named base.
`stata`	`ThemeStata`	Named base.
`stata_s1color`	`ThemeStatas1color`	Named base.
`stata_mono`	`ThemeStatamono`	Named base.
`solarized`	`ThemeSolarized`	Named base.
`solarizeddark`	`ThemeSolarizeddark`	Named base.
`economist_white`	`ThemeEconomistwhite`	Named base.
`solarized_2`	`ThemeSolarized2`	Named base.
`solarized_2dark`	`ThemeSolarized2dark`	Named base.
`wsj`	`ThemeWsj`	Named base.
`gdocs`	`ThemeGdocs`	Named base.
`hc`	`ThemeHc`	Named base.
`hcdark`	`ThemeHcdark`	Named base.
`pander`	`ThemePander`	Named base.
`calc`	`ThemeCalc`	Named base.
`excel`	`ThemeExcel`	Named base.
`excel_new`	`ThemeExcelnew`	Named base.
`base`	`ThemeBase`	Named base.
`igray`	`ThemeIgray`	Named base.
`map`	`ThemeMap`	Named base.
`solid`	`ThemeSolid`	Named base.
`grey`	`ThemeGrey`	Alias of `ggplot2` (same token map).
`gray`	`ThemeGray`	Alias of `ggplot2` (same token map).
`test`	`ThemeTest`	Named base.

Usage

One theme child per plot. Composition is replace: if you declare two theme children, the last one wins. Role overrides merge onto the named base — unset roles keep the built-in values.

<script lang="ts">
  import { GeomPoint, GGPlot, ThemeDark } from "@ggsvelte/svelte";

  const rows = [
    { x: 1, y: 2 },
    { x: 2, y: 4 },
  ];
</script>

<GGPlot data={rows} aes={{ x: "x", y: "y" }}>
  <ThemeDark ink="#f5f5f5" tooltipPaper="#1a1a1a" tooltipInk="#f5f5f5" />
  <GeomPoint />
</GGPlot>

Reactive base name:

<Theme name={activeTheme} paper="none" focusRing="#ffcc00" />

Color and interaction roles

These props are CSS colors (or, for interactionMuted, a 0–1 opacity). Color roles ride --gg-* custom properties so a host can restyle without re-authoring the plot. Interaction roles also publish --gg-theme-* on the plot root for tool rails, tooltips, focus rings, and selection chrome — keep tooltipPaper / tooltipInk and interactionInk contrasty so recovery controls like legend Clear stay readable on dark bases.

Prop	Kind	Affects	CSS
`ink`	color	Axis lines, tick labels, titles, unmapped line/point/text marks, legend labels.	`--gg-ink`
`paper`	color	Plot-wide background. Use "none" for transparent.	`--gg-paper`
`accent`	color	Default fill for unmapped bars, columns, and areas.	`--gg-accent`
`grid`	color	Panel major grid lines.	`--gg-grid`
`panel`	color	Panel background (separate from paper).	`--gg-panel`
`letterboxFill`	color	Fixed-aspect gutter fill. Defaults to paper when unset.	`--gg-letterboxFill`
`axisText`	color	Axis tick-label color.	`--gg-axisText`
`axisLine`	color	Axis baseline color.	`--gg-axisLine`
`tickColor`	color	Axis tick-mark color.	`--gg-tickColor`
`panelBorder`	color	Panel frame color when showPanelBorder is true.	`--gg-panelBorder`
`interactionInk`	color	Primary interaction-control and overlay ink (tool rail, clear, overlays).	`--gg-interactionInk / --gg-theme-interactionInk`
`interactionMuted`	opacity	Opacity for marks de-emphasized by legend focus or selection (0–1 number, not a color).	`--gg-interactionMuted / --gg-theme-interactionMuted (numeric alpha)`
`focusRing`	color	Keyboard-focus and active-mark halo.	`--gg-focusRing / --gg-theme-focusRing`
`crosshair`	color	Crosshair guide color.	`--gg-crosshair / --gg-theme-crosshair`
`selectionFill`	color	Interval-selection fill (normally translucent).	`--gg-selectionFill / --gg-theme-selectionFill`
`selectionStroke`	color	Interval-selection and zoom-target stroke.	`--gg-selectionStroke / --gg-theme-selectionStroke`
`tooltipPaper`	color	Opaque tooltip surface.	`--gg-tooltipPaper / --gg-theme-tooltipPaper`
`tooltipInk`	color	Tooltip foreground text.	`--gg-tooltipInk / --gg-theme-tooltipInk`
`tooltipBorder`	color	Tooltip keyline.	`--gg-tooltipBorder / --gg-theme-tooltipBorder`
`toolActive`	color	Active tool text and underline on the tool rail.	`--gg-toolActive / --gg-theme-toolActive`

Type and geometry roles

Sizes are in CSS px unless noted. Boolean flags blank axis/grid pieces (void-style themes turn labels and grids off).

Prop	Kind	Affects
`fontFamily`	type	Chart typeface stack.
`fontSize`	length	Base and tick-label size in px.
`axisTextSize`	length	Axis tick-label size in px.
`fontWeight`	length	Base font weight (1–1000).
`titleSize`	length	Plot title size in px.
`titleWeight`	length	Plot title weight.
`subtitleSize`	length	Plot subtitle size in px.
`subtitleWeight`	length	Plot subtitle weight.
`axisTitleSize`	length	Axis title size in px.
`axisTitleWeight`	length	Axis title weight.
`guideTitleSize`	length	Legend / guide title size in px.
`legendKeySize`	length	Legend swatch size in px.
`legendKeyGap`	length	Gap between legend swatch and label.
`legendRowGap`	length	Vertical gap between legend rows.
`guideBlockGap`	length	Gap between stacked guide blocks.
`colorbarThickness`	length	Continuous colorbar thickness in px.
`colorbarLengthMin`	length	Minimum colorbar length in px.
`captionSize`	length	Caption text size in px.
`stripSize`	length	Facet strip label size in px.
`stripWeight`	length	Facet strip label weight.
`axisLineWidth`	length	Axis baseline stroke width.
`tickWidth`	length	Tick-mark stroke width.
`tickLength`	length	Tick-mark length in px.
`gridWidth`	length	Grid-line stroke width.
`panelBorderWidth`	length	Panel border stroke width.
`gridDasharray`	dash	SVG stroke-dasharray for major grid lines.
`axisLineX`	boolean	Draw the x-axis baseline.
`axisLineY`	boolean	Draw the y-axis baseline.
`ticksX`	boolean	Draw x-axis ticks.
`ticksY`	boolean	Draw y-axis ticks.
`labelsX`	boolean	Show x-axis tick labels (false for theme_void-style blanking).
`labelsY`	boolean	Show y-axis tick labels.
`gridX`	boolean	Draw vertical grid lines.
`gridY`	boolean	Draw horizontal grid lines.
`showPanelBorder`	boolean	Draw the panel frame.

Safe overrides

Prefer typed theme props (<ThemeDark paper="#0b0b0b" />) when authoring in Svelte — values land in PortableSpec and stay edition-stable.
Host CSS on --gg-ink, --gg-paper, and the other --gg-* roles works without a re-render; only override roles you intend to change.
Never treat interactionMuted as a color — it is a numeric alpha applied to de-emphasized marks.
When you darken paper / panel, also set tooltipPaper, tooltipInk, interactionInk, and focusRing so inspect chrome and legend Clear keep contrast.
Themes style chrome only. Data series colors use named palette schemes on ScaleColor* / ScaleFill* children.