# Example: Token-aware toolbar

A plain CSS toolbar reads var(--pretable-*) tokens directly and repaints alongside the grid when dark mode toggles, proving the tokens resolve live for any styling approach, not just the shipped grid CSS.

Source: https://pretable.ai/examples/token-aware-toolbar.md

```tsx TokenAwareToolbar.tsx
"use client";

import { useState } from "react";

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

import "./toolbar.css";

import { columns } from "./columns";
import { metrics, type Metric } from "./data";

const VIEWPORT_HEIGHT = 160;

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

  return (
    <div>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>
        The toolbar strip is plain CSS reading <code>var(--pretable-*)</code>{" "}
        directly — no Tailwind bridge involved. Flip dark mode (scoped to the
        wrapper below, same adaptation as the other demos on this page) and the
        toolbar repaints with the grid, from the same custom properties, because
        both read the same live values.
      </p>
      <button
        onClick={() => setDark((v) => !v)}
        style={{ marginBottom: 8 }}
        type="button"
      >
        Switch to {dark ? "light" : "dark"}
      </button>
      <div data-theme={dark ? "dark" : undefined}>
        <div className="token-aware-toolbar">
          Latency dashboard ·{" "}
          <span className="token-aware-toolbar-accent">live</span>
        </div>
        <PretableSurface<Metric>
          ariaLabel="Metrics"
          columns={columns}
          getRowId={(row) => row.id}
          rows={metrics}
          viewportHeight={VIEWPORT_HEIGHT}
        />
      </div>
    </div>
  );
}
```

```css toolbar.css
/* Plain global CSS, standing in for a CSS Module or styled-components or
   emotion — whichever one you use, the mechanism is the same: reference
   var(--pretable-*) directly and it resolves at runtime. Class names are
   prefixed .token-aware-toolbar-* only so they can't collide with anything
   else on this docs page; a real app's CSS Module or styled-components
   output is scoped for you automatically. */
.token-aware-toolbar {
  background: var(--pretable-bg-toolbar);
  color: var(--pretable-text-dim);
  border-bottom: 1px solid var(--pretable-rule);
  font-family: var(--pretable-font-sans);
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
}

.token-aware-toolbar-accent {
  color: var(--pretable-accent);
  font-family: var(--pretable-font-mono);
  font-weight: 600;
}
```

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

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

export const columns: PretableColumn<Metric>[] = [
  { id: "name", header: "Metric", widthPx: 150 },
  { id: "value", header: "Value", widthPx: 90 },
];
```

```ts data.ts
export interface Metric {
  id: string;
  name: string;
  value: string;
}

export const metrics: Metric[] = [
  { id: "m1", name: "Latency p50", value: "112ms" },
  { id: "m2", name: "Latency p99", value: "480ms" },
  { id: "m3", name: "Error rate", value: "0.4%" },
];
```