# Design-token theme

> Syntax colors driven by CSS variables mapped to design tokens.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-code-block-19).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-code-block-19
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-code-block-19-light-2b25ac744d424ae6.png
- Registry item: https://reui.io/r/new-york-v4/c-code-block-19.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-code-block-19.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@reui/code-block`, `scroll-area`

## Files

### `c-code-block-19.tsx`

```tsx
import {
  CodeBlock,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/reui/code-block/code-block"

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"

const code = `export function useTheme() {
  const [theme, setTheme] = useState<"light" | "dark">("light")
  const toggle = () => setTheme((value) => (value === "light" ? "dark" : "light"))
  return { theme, toggle }
}`

/*
 * The "css-variables" theme emits var(--code-token-*) references instead of
 * hex colors, so the palette below IS the syntax theme: swap these lines for
 * your design tokens and the highlighting follows your brand in both modes.
 */
const paletteClass = [
  "[--code-token-keyword:var(--color-rose-600)]",
  "[--code-token-function:var(--color-violet-600)]",
  "[--code-token-string:var(--color-emerald-600)]",
  "[--code-token-string-expression:var(--color-emerald-600)]",
  "[--code-token-constant:var(--color-sky-600)]",
  "[--code-token-parameter:var(--color-amber-600)]",
  "[--code-token-comment:var(--muted-foreground)]",
  "[--code-token-punctuation:var(--foreground)]",
  "[--code-foreground:var(--foreground)]",
  "dark:[--code-token-keyword:var(--color-rose-400)]",
  "dark:[--code-token-function:var(--color-violet-400)]",
  "dark:[--code-token-string:var(--color-emerald-400)]",
  "dark:[--code-token-string-expression:var(--color-emerald-400)]",
  "dark:[--code-token-constant:var(--color-sky-400)]",
  "dark:[--code-token-parameter:var(--color-amber-400)]",
].join(" ")

export function Pattern() {
  return (
    <CodeBlock
      code={code}
      language="typescript"
      showLineNumbers
      themes={{ light: "css-variables", dark: "css-variables" }}
      className={"w-full max-w-2xl " + paletteClass}
    >
      <CodeBlockHeader>
        <CodeBlockTitle>use-theme.ts</CodeBlockTitle>
        <div className="ml-auto flex items-center gap-1.5">
          <span className="text-muted-foreground text-xs">
            Colors from design tokens
          </span>
          <CodeBlockCopyButton />
        </div>
      </CodeBlockHeader>

      {/* The ScrollArea composes INSIDE the block, so the block's own border
          and per-style radius stay the container, the header above never
          scrolls, and `max-h` means the area grows to the content instead of
          stretching past a short file. */}
      <ScrollArea className="rounded-[inherit] **:data-[slot=scroll-area-viewport]:max-h-72">
        <CodeBlockContent />
        <ScrollBar orientation="horizontal" />
      </ScrollArea>
    </CodeBlock>
  )
}
```