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

If instead you specify a dark CSS className, the dark theme will be applied

<body className="dark">
    <DataSource {...dataSouceProps}>
      <InfiniteTable {...props} />
Theme switching demo - default to light theme
View Mode
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 (
        display: 'flex',
        flexFlow: 'column',
        flex: 1,
      <DataSource<Employee> data={dataSource} primaryKey="id">
        <InfiniteTable<Employee> columns={columns} />

        style={{ marginTop: 'var(--infinite-space-4)' }}
        onClick={() => setTheme(currentTheme === 'dark' ? 'light' : 'dark')}
        Switch Theme

const dataSource = () => {
  return fetch('' + '/employees100')
    .then((r) => r.json())
    .then((data: Employee[]) => {


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.