# Themeable chat-client shell > One chat mock that reskins to look like Claude, ChatGPT, Goose, or VS Code — canvas, chrome, bubbles, accent, avatar and serif-vs-sans all swap from a single theme token set. - **Category:** Marketing - **Source (best-in-class):** [daysurface.com](https://daysurface.com) - **Tags:** chat, mock, hero, theme, tokens, css-variables, claude, chatgpt, marketing - **Dependencies:** react, tailwindcss - **Status:** stable - **Live demo:** https://eito.me/ui/chat-shell ## Problem A landing page that shows a product living “inside your chat client” needs the mock to read as that client — but maintaining four separate chat UIs is four times the markup. This shell carries the whole client identity in a small token set (spread onto the root as CSS custom properties); every element reads the tokens via var(), so switching client is a one-object swap with no re-render and no reflow. ## When to use - You demo something embedded in Claude / ChatGPT / Copilot and want the frame to look native to each. - A client toggle should reskin the mock instantly, at first paint, with no flash of the wrong theme. - You want conversation content (bubbles, assistant lines, tool-call chips) decoupled from the client skin. ## Code — snippet.tsx ```tsx import type { CSSProperties, ReactNode } from "react"; /** * ChatShell — a themeable chat-client mock, ported from the daysurface.com * landing page hero (its four-client chat toggle). * * The idea worth copying: ONE chat component that reskins to look like Claude, * ChatGPT, Goose, or VS Code. The entire client identity — canvas, chrome, * bubble colour, accent, avatar mark, serif-vs-sans, name, composer * placeholder — is carried in a small `ChatTheme` token set. On the real site * those tokens are CSS custom properties keyed off ``, so * selecting a client anywhere on the page re-skins every chat frame in CSS at * first paint, with no JS in the swap. * * This snippet keeps that shape: the theme is spread onto the shell root as * `--chat-*` custom properties, and every nested element reads them via * `var(--chat-*)`. Swap the theme object and the whole shell changes identity. * * A conversation is a list of turns (`user` bubble · `reason` summary line · * `assistant` line · `tool` call chip), so the same shell renders any script. * The assistant line uses the theme's `sayFont` (serif for Claude, sans * elsewhere) — the small tell that makes each client read as itself. * * Deps: react + tailwindcss only. Each client's real brand SVG is supplied as a * URL (theme.logo) and painted via CSS `mask`, so it tints to the accent and * two instances never collide on the ids inside a multi-path logo (VS Code). */ /* ---- theme model ----------------------------------------------------------- */ /** * How a client draws a completed tool call. Each real client has its own idiom, * so this is part of the theme, not a shared chip: * - timeline (Claude) muted activity row — the client mark (or the tool's own * app icon) + a sans muted label ("Verifying available * tools and resources", "Gmail status"), no border * - task (ChatGPT) borderless activity title ("Curating Inbox…") + spinner icon, * sans muted — the human-readable task, not the raw tool id * - pill bordered mono pill, accent glyph, trailing ✓ * - bare borderless muted "Used " line, no status mark * - card (Goose) bordered card: filled-accent check disc · name · chevron * - row (VS Code) bordered row, "Ran " (name in a link colour) · chevron */ export interface ToolCallStyle { variant: "timeline" | "task" | "pill" | "bare" | "card" | "row"; /** Verb prefix before the tool name, e.g. "Used" / "Ran". */ verb?: string; /** Trailing status mark: an inline ✓ (Claude) or a filled disc (Goose). */ check?: "inline" | "disc"; /** Trailing disclosure chevron (Goose, VS Code). */ chevron?: boolean; /** Override the tool-name colour — VS Code's link blue, distinct from accent. */ nameColor?: string; } export interface ChatTheme { /** Client id, also the React key when mapping presets. */ id: string; /** Display name in the header pill. */ name: string; /** Page/message canvas. */ canvas: string; /** Header + composer chrome surface. */ chrome: string; /** Hairline borders. */ border: string; /** Primary text. */ text: string; /** Muted text (placeholder, secondary). */ muted: string; /** Brand accent — avatar tint, send button, tool-chip icon. */ accent: string; /** Foreground drawn ON the accent (send-button arrow). */ accentFg: string; /** User bubble fill. */ bubble: string; /** User bubble text (defaults to `text`). */ bubbleText?: string; /** Assistant copy font — a serif here is the Claude tell. */ sayFont: string; /** Composer placeholder line. */ placeholder: string; /** * URL of the client's brand SVG (e.g. the real Claude / OpenAI / Goose / * VS Code mark). Rendered via CSS `mask`, so it's tinted to a single colour * (the accent) and never collides on ids the way inline multi-path logos do. */ logo: string; /** Whether assistant turns show the avatar mark. ChatGPT/Goose render none. */ assistantAvatar: boolean; /** How this client renders a tool call — each has its own idiom. */ toolCall: ToolCallStyle; /** * Phrasing this client puts before a reasoning duration, e.g. ChatGPT's * "Worked for" (→ "Worked for 14s") or Claude's "Thought for". Absent means * this client shows no reasoning summary, and `reason` turns are dropped for * it — the same one-conversation-many-idioms trick `label` uses on tool calls. */ reasonVerb?: string; } /** * The four presets reproduced from the DaySurface hero. Their `logo` paths are * root-relative to THIS site's `/icons` library, so copied verbatim into another * app the masked marks resolve against that app's root and render blank. When * reusing these presets elsewhere, point `logo` at your own asset URLs (the demo * prefixes `import.meta.env.BASE_URL` to resolve them under any base path). */ export const chatThemes: Record = { claude: { id: "claude", name: "Claude", canvas: "#f5f1e8", chrome: "#faf8f2", border: "#e5e0d6", text: "#2d2a26", muted: "#9a9286", accent: "#c96442", accentFg: "#ffffff", bubble: "#e7e1d4", sayFont: "Georgia, 'Times New Roman', serif", placeholder: "Reply to Claude…", logo: "/icons/agents/claude.svg", assistantAvatar: true, toolCall: { variant: "timeline" }, }, chatgpt: { id: "chatgpt", name: "ChatGPT", canvas: "#212121", chrome: "#303030", border: "#3a3a3a", text: "#ececec", muted: "#b4b4b4", accent: "#ffffff", // current ChatGPT mark is near-white, not the legacy teal accentFg: "#0d0d0d", bubble: "#2f4a7a", // current ChatGPT user bubble is blue bubbleText: "#ffffff", sayFont: "system-ui, sans-serif", placeholder: "Ask ChatGPT", logo: "/icons/agents/chatgpt.svg", assistantAvatar: false, // ChatGPT replies are plain full-width text, no avatar toolCall: { variant: "task", chevron: true }, reasonVerb: "Worked for", // collapsed "Worked for 14s ⌄" reasoning summary }, goose: { id: "goose", name: "goose", canvas: "#22252a", chrome: "#3f434b", border: "#474e57", text: "#e3e6ea", muted: "#878787", accent: "#13bbaf", accentFg: "#10221f", bubble: "#ffffff", bubbleText: "#22252a", sayFont: "system-ui, sans-serif", placeholder: "Ask goose anything…", logo: "/icons/agents/goose.svg", assistantAvatar: false, // Goose replies are plain text + timestamp, no avatar toolCall: { variant: "card", check: "disc", chevron: true }, }, vscode: { id: "vscode", name: "VS Code", canvas: "#1f1f1f", chrome: "#181818", border: "#3c3c3c", text: "#cccccc", muted: "#858585", accent: "#0078d4", accentFg: "#ffffff", bubble: "#2b2b2b", sayFont: "system-ui, sans-serif", placeholder: "Ask Copilot", logo: "/icons/agents/vscode.svg", assistantAvatar: true, toolCall: { variant: "row", verb: "Ran", chevron: true, nameColor: "#4daafc" }, }, }; /* ---- conversation model ---------------------------------------------------- */ export type Turn = | { role: "user"; text: string } | { role: "assistant"; text: string } // A client's collapsed reasoning summary ("Worked for 14s"). `seconds` is the // duration; the verb ("Worked for") is the client's, from `theme.reasonVerb`, // so one turn reads natively per client (and vanishes where there's no verb). | { role: "reason"; seconds: number } // `name` is the raw tool id (shown by Goose/VS Code); `label` is the human // activity title Claude/ChatGPT show instead ("Curating Inbox…"). `icon` is an // optional full-colour app-icon URL the Claude timeline uses in place of the // client mark (e.g. a Gmail mark for a Gmail tool). | { role: "tool"; name: string; label?: string; icon?: string; ok?: boolean }; type ToolTurn = Extract; export interface ChatShellProps { theme: ChatTheme; conversation: Turn[]; /** Fixed body height so a client swap never reflows the surrounding layout. */ bodyHeight?: number; className?: string; } /* ---- marks ----------------------------------------------------------------- */ /** * The client's real brand mark — the SVG at `logo`, painted through a CSS mask * so it renders as a crisp single-colour silhouette in `color` (default: the * accent). Masking (vs. an ) lets currentColor logos show on dark canvases * and avoids id clashes between two instances of a multi-path logo. */ function Mark({ logo, size = 20, color = "var(--chat-accent)" }: { logo: string; size?: number; color?: string }) { return (