Theming & Appearance

Graphic Walker provides multiple levels of visual customization: dark mode, chart rendering themes, and full UI color customization.

Dark Mode

Control dark mode with the appearance prop:

// Follow user's OS preference (default)
<GraphicWalker appearance="media" />
 
// Always light
<GraphicWalker appearance="light" />
 
// Always dark
<GraphicWalker appearance="dark" />

Chart Themes

The vizThemeConfig prop controls how charts are rendered. Choose a built-in theme or provide a custom Vega config object:

Built-in Themes

Theme	Description
`'vega'`	Default Vega-Lite theme
`'g2'`	G2 (AntV) inspired theme
`'streamlit'`	Streamlit-inspired theme

<GraphicWalker vizThemeConfig="streamlit" data={data} fields={fields} />

Custom Vega Config

Pass a full Vega/Vega-Lite config object for granular control over chart rendering:

const customTheme = {
  arc: { fill: '#4c78a8' },
  area: { fill: '#4c78a8' },
  bar: { fill: '#4c78a8' },
  line: { stroke: '#4c78a8' },
  point: { fill: '#4c78a8' },
  axis: {
    domainColor: '#888888',
    gridColor: '#e0e0e0',
    tickColor: '#888888',
  },
};
 
<GraphicWalker vizThemeConfig={customTheme} data={data} fields={fields} />

Custom UI Colors

The uiTheme prop lets you customize the UI elements (buttons, panels, text) separately from the chart theme. It accepts an IUIThemeConfig with color sets for both light and dark modes:

const uiTheme = {
  light: {
    background: '#ffffff',
    foreground: '#1a1a1a',
    primary: '#6366f1',
    'primary-foreground': '#ffffff',
    muted: '#f1f5f9',
    'muted-foreground': '#64748b',
    border: '#e2e8f0',
    ring: '#6366f1',
  },
  dark: {
    background: '#0f172a',
    foreground: '#f8fafc',
    primary: '#818cf8',
    'primary-foreground': '#0f172a',
    muted: '#1e293b',
    'muted-foreground': '#94a3b8',
    border: '#334155',
    ring: '#818cf8',
  },
};
 
<GraphicWalker uiTheme={uiTheme} data={data} fields={fields} />

Color Set Properties

Property	Required	Description
`background`	Yes	Page/component background color
`foreground`	Yes	Primary text color
`primary`	Yes	Primary action color (buttons, links)
`primary-foreground`	Yes	Text on primary-colored elements
`muted`	Yes	Muted backgrounds (selected items, separators)
`muted-foreground`	Yes	Description/secondary text color
`border`	Yes	Border color for containers
`ring`	Yes	Focus ring color
`card`	No	Card background (defaults to `background`)
`card-foreground`	No	Card text color (defaults to `foreground`)
`popover`	No	Popover background (defaults to `background`)
`popover-foreground`	No	Popover text color (defaults to `foreground`)
`secondary`	No	Secondary button background (defaults to `muted`)
`secondary-foreground`	No	Secondary button text (defaults to `primary`)
`accent`	No	Hover state background (defaults to `muted`)
`accent-foreground`	No	Hover state text (defaults to `primary`)
`destructive`	No	Danger/delete action color
`destructive-foreground`	No	Text on destructive elements
`dimension`	No	Dimension field badge color
`measure`	No	Measure field badge color
`input`	No	Input border color (defaults to `border`)

Color Palettes

Control the color palette used in chart encoding with the colorPalette property in IVisualLayout, or use the scales prop for per-channel control.

Categorical Palettes

For nominal data: accent, category10, category20, category20b, category20c, dark2, paired, pastel1, pastel2, set1, set2, set3, tableau10, tableau20

Sequential Single-Hue

For increasing quantitative values: blues, tealblues, teals, greens, browns, oranges, reds, purples, warmgreys, greys

Sequential Multi-Hue

For quantitative data in heatmaps: viridis, magma, inferno, plasma, cividis, turbo, bluegreen, bluepurple, goldgreen, goldorange, goldred, greenblue, orangered, purplebluegreen, purpleblue, purplered, redpurple, yellowgreenblue, yellowgreen, yelloworangebrown, yelloworangered, darkblue, darkgold, darkgreen, darkmulti, darkred, lightgreyred, lightgreyteal, lightmulti, lightorange, lighttealblue

Diverging

For data with a meaningful midpoint: blueorange, brownbluegreen, purplegreen, pinkyellowgreen, purpleorange, redblue, redgrey, redyellowblue, redyellowgreen, spectral

Cyclical

For periodic patterns: rainbow, sinebow

Custom Scales Example

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: {
      scheme: 'tableau10',
    },
    size: {
      rangeMin: 10,
      rangeMax: 100,
    },
  }}
/>

Scales can also be functions that receive field info:

<GraphicWalker
  data={data}
  fields={fields}
  scales={{
    color: (info) => ({
      scheme: info.semanticType === 'nominal' ? 'tableau10' : 'viridis',
    }),
  }}
/>

Chart Types Data Computation