Custom color of GraphicWalker to adapt your website

You can use the uiTheme prop to change the color of the GraphicWalker.

You can use rgb hex colors, hsl colors, css color names, or tailwindcss color names.

You can build a theme for you self here (opens in a new tab).

import { useMemo } from 'react';
import { GraphicWalker, type IUIThemeConfig } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
 
const uiTheme: IUIThemeConfig = {
    light: {
        background: 'amber-100',
        foreground: 'amber-950',
        primary: 'amber-950',
        'primary-foreground': 'amber-50',
        muted: 'amber-200',
        'muted-foreground': 'amber-500',
        border: 'amber-300',
        ring: 'amber-950',
    },
    dark: {
        background: 'amber-900',
        foreground: 'white',
        primary: '#fff',
        'primary-foreground': 'amber-800',
        muted: 'amber-700',
        'muted-foreground': 'amber-400',
        border: 'amber-700',
        ring: 'amber-300',
    },
};
 
export default function App() {
    const { dataSource, fields } = useMemo(() => transData(data), [data]);
    return (
        <GraphicWalker data={dataSource} fields={fields} uiTheme={uiTheme} />
    );
}

You can see the result here:

There are also some builtin themes and some helper functions to help you build the theme:

import { getColorConfigFromPalette, getPaletteFromColor } from '@kanaries/graphic-walker/utils/colors';
import colors from 'tailwindcss/colors';
 
// Get the color config from the palette that created from a custom color
const colorConfig = getColorConfigFromPalette(getPaletteFromColor("#fe1308"));
 
// Get the color config from the palette that created from a tailwindcss color
const colorConfig = getColorConfigFromPalette(getPaletteFromColor("amber-500"));
 
// Get the color config from the palette imported from tailwindcss
const colorConfig = getColorConfigFromPalette(colors.gray);

Custom Chart of Graphic Walker Graphic Walker Workflow DSL