Graphic Walker
Client Side
Dark Mode of Graphic Walker

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} />
    </>
}