Skip to main content
Themes control the overall visual appearance of your graphs: backgrounds, text colors, borders, tooltips etc.

​
Built-in themes

The SDK includes two built-in themes: graphyLightTheme (default) and graphyDarkTheme. 
import { GraphProvider, graphyLightTheme, graphyDarkTheme } from '@graphysdk/core';

<GraphProvider theme={graphyDarkTheme}>
  <Graph />
</GraphProvider>

​
Custom themes

Extend a built-in theme by overriding specific values: 
const customTheme = {
  ...graphyLightTheme,
  values: {
    ...graphyLightTheme.values,
    graphBackground: '#f8fafc',
    textPrimary: '#0f172a',
    gridLineColor: '#e2e8f0',
  },
};

<GraphProvider theme={customTheme}>
  <Graph />
</GraphProvider>
See GraphTheme for all available design tokens.

​
Per-graph overrides

To override theme tokens for a specific graph without creating a full custom theme, use themeOverrides in your config: 
const config: GraphConfig = {
  data: { ... },
  themeOverrides: {
    graphBackground: '#1e293b',
    textPrimary: '#f8fafc',
    gridLineColor: '#334155',
  },
};

<Graph config={config} />
This is useful when most graphs use the same theme but a few need adjustments (e.g., a dark card in a light-themed app).