Theme Skinner
Guide & FAQ

steagus publishing · free · offline

Theme Skinner

Pick one color. Get a whole palette.

A small, free tool for building color themes — for your Steagus apps, or for any HTML page that just needs a clean, consistent set of colors. You work in your browser, nothing leaves your device, and what you make is yours to keep.

you pick
#f0faff
it derives the rest
surface-2
text
accent
border
+62
…and on

One surface color cascades into a full set of 67 customizable color slots — anchors, text roles, borders, buttons, semantics and more. The engine derives them all; every one is yours to override.

One color in, a full set out

Choose a surface color and the anchors derive around it — then the cascade carries on through 67 customizable color slots in all. Override any one; the rest keep up.

Contrast handled for you

Button and label text picks light or dark on its own, checking contrast (WCAG) against whatever it sits on — so it stays readable as you change colors.

See it live as you go

A live preview shows real UI dressed in your theme, updating instantly. A read-only panel beside it shows exactly what each change touched.

Theme Skinner · Slate & Amber

Twenty-one themes to start from

Or begin with a blank canvas and build from nothing. Every swatch below is a real exported palette:

Shoreline
Arctic
Harvest
Sakura
Pink
Lavender
Slate & Amber
Forest
Noir Rose
Midnight Navy
Cyberpunk
Deep Water

Export clean CSS — and use it anywhere

Theme Skinner writes a tidy :root stylesheet of named variables. It started as a way to reskin Steagus apps, but the CSS it produces is just CSS — drop it onto any HTML page that needs a consistent color scheme.

:root {
  --surface: #f0faff;
  --surface-container: #b8eaf8;
  --text: #002233;
  --accent: #003d66;
  --primary-action: #003d66;
}

.spts-bg-accent {
  background-color: var(--accent);
}
rendered from that CSS

Quarterly summary

Everything here is styled by the variables on the left.

Primary action Saved

The export also includes optional utility classes (.spts-bg-accent, .spts-text-title, and so on) you can drop straight onto elements. Edit one value in :root and everything updates — a single source of truth for the whole page.

Tools › Export CSS

Room to experiment, safely

Try things freely. There's always a way back.

Save Points
Named return points, kept in your browser's local database. Drop one before a big change and come back to it whenever you like.
Undo / Redo
Step back and forward through your edits with Ctrl/Cmd + Z. Set how far back it remembers in Settings.
Save & Import
Keep a theme in the app, or write it to a file you can re-import later or hand to another machine.

Free, offline, and out of your way

It isn't a full design system or a page builder — it does one thing: colors, chosen carefully and exported cleanly. And that's the point.