█▀▀ █▀▀ █▀▀ ▀█▀ █ █ █▀█ █▀▀ █▀▄
█   ▀▀█ ▀▀█  █  █ █ █ █ █▀▀ █▀▄
▀▀▀ ▀▀▀ ▀▀▀  ▀  ▀▀▀ ▀ ▀ ▀▀▀ ▀ ▀

Tune your design tokens.
On your real pages.

The devtool overlay that lives in your app. Tweak colors, toggle dark mode, save to file. No context switching.

$ npm install csstuner click to copy
localhost:3000 
█▀▀ █▀▀ █▀▀ ▀█▀ █ █ █▀█ █▀▀ █▀▄
█   ▀▀█ ▀▀█  █  █ █ █ █ █▀▀ █▀▄
▀▀▀ ▀▀▀ ▀▀▀  ▀  ▀▀▀ ▀ ▀ ▀▀▀ ▀ ▀
Background
Foreground
Primary
Destructive
GIF demo coming soon
// THE PROBLEM

Every theme editor pulls you out of your app.

You tweak on a generic demo. You paste into your code. You refresh. You tweak again. Repeat.

01

Context switching

External editors show their own UI, not yours. You never see how colors work on your actual components.

02

Copy-paste workflow

Generate a palette, copy the CSS, paste it, refresh, realize it's wrong, go back. Every. Single. Time.

03

No dark mode awareness

Most editors generate one set of colors. You're on your own for dark mode. Two trips instead of one.

// THE SOLUTION

CssTuner lives inside your app. It reads your existing CSS variables, shows them on a panel next to your real pages, and writes changes back to your CSS file. You see every change instantly on your actual components. No external tool. No copy-paste.

// your workflow before
open external editor → tweak on demo → copy css → paste → refresh → repeat

// your workflow with csstuner
tweak on your page → save
// FEATURES
L C H

OKLCH Color Picker

2D lightness-chroma area + hue strip. Paste any format (hex, hsl, rgb, oklch) — it converts automatically. Gamut awareness with P3 indicator.

◑

Dark Mode Toggle

Detects your .dark variables automatically. Toggle between light and dark, edit each set independently. Syncs with your app's own toggle.

>_

Inspect Mode

Click any element on your page. CssTuner shows the CSS variables that affect it — including inherited ones. Edit directly.

:w

Save to File

Click Save, changes are written to your CSS file. The companion detects the right file, preserves your format (oklch, hsl, hex). Hot-reload picks it up.

// HOW IT WORKS
1

Install

One line. Works with any React project.

npm install csstuner
2

Add to your layout

Drop the component. It auto-detects your framework and groups your variables.

<CssTuner />
3

Tweak and save

Open the overlay, change colors on your real pages, click Save. Done. Your CSS file is updated.

npx csstuner
// COMPATIBILITY

Works with any CSS-variable-based project.

Auto-detects your design system and groups variables accordingly.

shadcn/ui
Tailwind v4
Radix Themes
Open Props
Any --custom-property

Start tuning.

Free and open source. One line to install.

$ npm install csstuner click to copy