Dark mode of Graphic Walker
GraphicWalker is using system theme by default. If your website have a customized dark mode setting,
you will need to set the appearance
attribute to light
or dark
to force the theme of GraphicWalker.
import { useMemo, useState } from 'react';
import { GraphicWalker } from '@kanaries/graphic-walker';
import { transData } from '@kanaries/graphic-walker/dataSource/utils';
import data from './data.json';
import spec from './spec.json';
export default function App() {
const { dataSource, fields } = useMemo(() => transData(data), [data]);
const [appearance, setAppearance] = useState('light');
return <>
<button onClick={() => setAppearance(before => before === 'light' ? 'dark': 'light')}>Toggle Darkmode</button>
<GraphicWalker data={dataSource} fields={fields} chart={spec} appearance={appearance} />
</>
}