Theming
<InfiniteTable />
ships with a CSS file that you need to import in your codebase to make the component look as intended.
import '@infinite-table/infinite-react/index.css';
This file includes both the light
and the dark
themes.
At runtime, the light
or dark
theme are applied based on the user OS settings for the preferred color scheme.
To explicitly apply the light theme, apply the className "light"
(or "infinite-light"
) to any parent element of the <InfiniteTable />
component.
To explicitly apply the dark theme, apply the className "dark"
(or "infinite-dark"
) to any parent element of the <InfiniteTable />
component.
<div className="light">
<DataSource {...dataSouceProps}>
<InfiniteTable {...props} />
</DataSource>
</div>
If instead you specify a dark
CSS className, the dark theme will be applied
<body className="dark">
<div>
<DataSource {...dataSouceProps}>
<InfiniteTable {...props} />
</DataSource>
</div>
</body>
import { InfiniteTable, DataSource } from '@infinite-table/infinite-react'; import * as React from 'react'; import { columns, Employee } from './columns'; export default function App() { const [currentTheme, setTheme] = React.useState('light'); return ( <div className={currentTheme} style={{ display: 'flex', flexFlow: 'column', flex: 1, }} > <DataSource<Employee> data={dataSource} primaryKey="id"> <InfiniteTable<Employee> columns={columns} /> </DataSource> <button style={{ marginTop: 'var(--infinite-space-4)' }} onClick={() => setTheme(currentTheme === 'dark' ? 'light' : 'dark')} > Switch Theme </button> </div> ); } const dataSource = () => { return fetch('https://infinite-table.com/.netlify/functions/json-server' + '/employees100') .then((r) => r.json()) .then((data: Employee[]) => { console.log(data)
Note
If you don’t explicitly have a light
or dark
ancestor, InfiniteTable
will use the browser/OS preference (via @media (prefers-color-scheme: ...)
) to apply the dark or light theme.