Cossplay

Live-edit coss ui theme variables on any website, from your side panel.

Cossplay live-edits the theme of a website built with coss ui (or any site that uses shadcn-style CSS variables) from Chrome's side panel. Changes show on the page as you make them, and only on your screen. Open a coss ui site, click the Cossplay icon and the side panel reads the site's own theme: colors on :root, .dark and [data-theme], plus fonts, radius, spacing, letter spacing and shadows. - 43 presets: coss ui's default theme and 42 tweakcn presets. Step through them or shuffle. - Color editing in HEX, OKLCH, HSL or RGB, with a color picker, Tailwind palette, channel sliders and opacity. Values are written back in the site's own color format. - Light and dark mode, edited separately; preview either mode on the page. - Inspect: hover an element on the page to see which theme tokens it uses, click one to edit it. - Global hue, saturation and lightness adjustments. - Typography: font stacks with Google Fonts search, letter spacing. - WCAG contrast checks for 15 color pairs. - Undo and redo for every edit. - Import a theme from a tweakcn or shadcn registry URL, pasted CSS or JSON, or a file. - Export Tailwind v4 (OKLCH) or v3 (HSL) CSS, registry JSON, token JSON, a Tailwind v3 config or a Next.js font layout. Unedited presets also show a shadcn CLI install command. - Saved per site, with an on/off switch; restored before the page paints when you come back. Only the tokens you edit are injected; everything else keeps following the site. Nothing is uploaded: themes stay in Chrome's local extension storage, there is no account and no server. The same editor runs without the extension at https://cossplay.vercel.app/editor. Not affiliated with coss, tweakcn or shadcn/ui. Presets come from tweakcn (Apache-2.0).