Skip to main content
Themes control the visual appearance of your graphs. You can use built-in preset themes or create custom themes. Override the default theme by passing a theme object to the theme prop of GraphProvider.

​
Preset Themes

The @graphysdk/core package exports two default themes: graphyThemeLight and graphyThemeDark.

​
Custom themes

You can extend an existing theme by overriding properties or create your own from scratch. 
import { graphyThemeLight } from '@graphysdk/core';

const customLightTheme = {
  ...graphyThemeLight,
  values: {
    ...graphyThemeLight.values,
    tooltipBackgroundColor: '#EEEEEE',
    tooltipTextColor: '#FF0000'
  }
};

function MyGraph() {
  return (
    <GraphProvider theme={customLightTheme}>
      <Graph />
    </GraphProvider>
  );
}

​
Color palettes

Color palettes determine the colors that will be used for each series on the graph itself. The Graphy SDK comes with preset color palettes, or you can provide your own.

​
Custom color palettes

To use a custom palettes, provide an array of ColorPalette objects to the customPalettes prop of GraphProvider. 
const rainbow = {
  id: 'rainbow',
  name: 'Rainbow',
  colors: [
      { id: '1', hex: '#ff0000', name: 'Red' },
      { id: '2', hex: '#00ff00', name: 'Green' },
      { id: '3', hex: '#0000ff', name: 'Blue' },
      { id: '4', hex: '#ffff00', name: 'Yellow' },
  ],
};

const monochrome = {
  id: 'monochrome',
  name: 'Monochrome',
  colors: [
      { id: '1', hex: '#000000', name: 'Black' },
      { id: '2', hex: '#444444', name: 'Dark' },
      { id: '3', hex: '#BBBBBB', name: 'Mid' },
      { id: '4', hex: '#FFFFFF', name: 'White' },
  ],
};

return (
  <GraphProvider customPalettes={[rainbow, monochrome]}>
      <Graph />
  </GraphProvider>
);
Each palette should have a unique id that identifies it to the application. To activate a specific palette for a graph, use the customPalette theme with your palette’s id: 
const appearanceConfig: AppearanceConfig = {
  theme: 'customPalette',
  palette: 'rainbow'
}

return (
  <GraphProvider config={{ appearanceConfig }}>
      <Graph />
  </GraphProvider>
);

​
Using custom palettes in the Editor

Any palettes you register through customPalettes automatically appear in the Color Palette section of the graph appearance settings. Custom palettes replace the built-in presets under Presets, giving you complete control over the available color options. Each palette displays its name and a preview of its colors in order of use. When a user selects a palette in the Editor, that choice is saved to appearanceConfig.palette, ensuring the same palette is applied when the graph is reloaded. If a graph contains more series than the palette defines, the Editor loops through the palette colors automatically. If a palette contains no valid colors, Graphy falls back to the default bright palette to maintain readability. If a color defined in seriesConfig isn’t part of the active palette, it’s ignored and replaced with the nearest palette color to preserve theme consistency.