# Example: Dark mode toggle

A button flips the data-theme attribute to dark on a wrapper div — pretable.css's dark block is a bare attribute selector, so the grid repaints instantly with no JavaScript touching a token value.

Source: https://pretable.ai/examples/dark-mode-toggle.md

```tsx DarkModeToggleGrid.tsx
"use client";

import { useState } from "react";

import { PretableSurface } from "@pretable/react";

import { columns } from "./columns";
import { tasks, type Task } from "./data";

const VIEWPORT_HEIGHT = 220;

export function DarkModeToggleGrid() {
  const [dark, setDark] = useState(false);

  return (
    <div>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>
        The button below sets <code>data-theme=&quot;dark&quot;</code> on the
        wrapper <code>div</code>, not on <code>&lt;html&gt;</code> — a docs-site
        adaptation so this one grid goes dark without repainting the rest of the
        page. A real app toggles the attribute on <code>&lt;html&gt;</code>{" "}
        instead; that is the pattern this example is standing in for.
      </p>
      <button
        onClick={() => setDark((value) => !value)}
        style={{ marginBottom: 8 }}
        type="button"
      >
        Switch to {dark ? "light" : "dark"}
      </button>
      <div
        data-theme={dark ? "dark" : undefined}
        style={{
          background: "var(--pretable-bg-toolbar)",
          borderRadius: 12,
          padding: 12,
        }}
      >
        <PretableSurface<Task>
          ariaLabel="Tasks"
          columns={columns}
          getRowId={(row) => row.id}
          rows={tasks}
          viewportHeight={VIEWPORT_HEIGHT}
        />
      </div>
    </div>
  );
}
```

```ts columns.ts
import type { PretableColumn } from "@pretable/react";

import type { Task } from "./data";

export const columns: PretableColumn<Task>[] = [
  { id: "title", header: "Task", widthPx: 200 },
  { id: "owner", header: "Owner", widthPx: 110 },
  { id: "status", header: "Status", widthPx: 110 },
];
```

```ts data.ts
export interface Task {
  id: string;
  title: string;
  owner: string;
  status: string;
}

export const tasks: Task[] = [
  {
    id: "t1",
    title: "Ship dark-mode toggle",
    owner: "Priya",
    status: "In review",
  },
  {
    id: "t2",
    title: "Audit checkbox contrast",
    owner: "Jae",
    status: "Done",
  },
  {
    id: "t3",
    title: "Wire density switch",
    owner: "Sam",
    status: "Todo",
  },
  {
    id: "t4",
    title: "Write theming docs",
    owner: "Priya",
    status: "In review",
  },
];
```