copilotkit__copilotkit/examples/v2/react-router/app/tailwind.css at main - copilotkit__copilotkit - GetSkill.work

skills/copilotkit__copilotkit

mirror of https://github.com/CopilotKit/CopilotKit.git synced 2026-09-14 16:26:20 +08:00

Files

T

Lukas Moschitz 295f75495e feat(examples): give the inspector lab a dark mode like the react demo

The launcher floats over a customer's page, and its border only earns its
place against a dark one -- so reviewing this branch needs a dark host page,
and the lab had no way to produce one.

Copied from `examples/v2/react/demo` rather than invented: the host owns a
theme state, and `CopilotChat` gets `className="dark"`, which is what makes
the package swap its own variable set. My first attempt stripped every
background instead, which is why the chat bubble, the send button, the
toolbar's on/off states and the error banner all vanished into one flat
grey -- the chat paints its own surfaces and has to be told, not undressed.

The colours are the demo's, by another route: it writes the oklch literals
that CopilotKit's variables use, and those are Tailwind's neutral steps --
`neutral-950` is `oklch(0.145 0 0)`, `neutral-50` is `oklch(0.985 0 0)`,
`neutral-800` is `oklch(0.269 0 0)`. Measured identical on the running lab.

`@custom-variant dark (&:is(.dark *))` is needed because Tailwind v4 points
`dark:` at `prefers-color-scheme` by default, so the toggle would have been
ignored in favour of the OS. Same declaration the package uses for its own
sheet.

The toggle sits top left, where the react demo puts it. Top right is where
the launcher floats.

2026-08-25 17:42:01 +02:00

7 lines

263 B

CSS

Raw Permalink Blame History

 @import "tailwindcss";
 /* Class-driven dark mode, so the lab's toggle drives it rather than the OS.
    Same declaration the CopilotKit package uses for its own sheet, see
    packages/react-core/src/v2/styles/globals.css. */
 @custom-variant dark (&:is(.dark *));