guide & faq
A short walkthrough of building a theme, then answers to the questions people ask most. If you just want to dive in, you can — the live preview makes most of this obvious.
Open Theme Skinner in your browser. Begin from one of the twenty-one built-in themes — pick whichever is closest to what you want — or start from a blank canvas and build from nothing.
There's no project to create and nothing to set up. The tool is one HTML file; opening it is all it takes.
Choose your surface — the main background color. From it, four anchors derive automatically: surface-container, text, accent, and border. The semantic colors (danger, warn, info) stay independent so your alerts read the way you expect.
All of these are yours to override — change any anchor directly and the rest of the theme adjusts around it.
The preview pane shows real interface elements wearing your theme, and re-colors the moment you change something. Beside it, a read-only panel lists exactly which colors a change touched and where each one came from — so nothing happens that you can't see.
Most themes are done after a surface pick and a couple of overrides. If you want more control, two sets of sliders are there when you need them:
Anchor envelope tuning changes the formulas the tool uses to derive each anchor — a per-theme adjustment that doesn't affect any other theme. Semantic anchor sliders shift danger, warn, and info together, for a coherent tonal move across all three at once.
Contrast is handled for you throughout: paired text colors (on buttons, on selected items) pick light or dark on their own to stay readable.
Save keeps the theme in the app (it needs a name). Save As writes it out as a file you can re-import later or move to another machine, and Import a Theme loads one back in.
For a permanent return point mid-edit, drop a Save Point — a named snapshot kept in your browser's local database. And Undo / Redo (Ctrl/Cmd + Z) covers the smaller steps along the way.
When the theme looks right, Export CSS writes a :root stylesheet of named variables — plus an optional block of utility classes (.spts-bg-accent, .spts-text-title, and the rest) you can drop straight onto elements.
It started as a way to reskin Steagus apps, but the output is plain CSS. Use it on any HTML page that needs a consistent color scheme. Edit one value in :root and the whole page follows — one source of truth.
Is Theme Skinner really free?
It's free to use — no cost, no account, no upsell. That's not the same as yours, though: Theme Skinner isn't for redistribution or resale, and Steagus Publishing retains all rights to the tool. The themes and CSS you create with it are yours to use however you like; the app itself stays ours.
Do I need an internet connection?
No. It's a single self-contained HTML file and runs entirely in your browser. Once you have the file, it works offline.
Does anything I make leave my device?
No. There are no servers and no tracking. Your themes stay on your machine unless you choose to export and share a file yourself.
Where are my themes stored?
In your browser — saved themes and Save Points live in your browser's local storage. That means clearing your browser data can remove them, so export anything you want to keep permanently or move to another machine.
Can I use the exported CSS on a site that isn't a Steagus app?
Absolutely — that's exactly what Export CSS is for. It produces standard CSS custom properties and utility classes that work on any HTML page.
What's the difference between Save, Save As, and a Save Point?
Save keeps the current theme in the app under a name. Save As writes it to a file on disk. A Save Point is a named in-browser snapshot you can return to mid-edit — handy before trying something drastic.
What are the .spts- classes in the export?
Optional utility classes, one per color slot, that reference the variables in :root. Drop .spts-bg-accent onto an element and it picks up your accent. You can delete the whole block if you'd rather write your own CSS.
What does "anchor envelope tuning" do?
It exposes the formulas the tool uses to derive each anchor from your surface color, as sliders — so you can shape how the cascade behaves for one theme without changing the defaults for any other.
Will Theme Skinner change my app's data?
No. It only deals with colors and themes. Your app's actual data is untouched.
Which browsers does it work in?
Any modern desktop browser. It's built for desktop work rather than phones.
How do I share a theme with someone?
Export it — either as a theme file (for another Steagus app) or as CSS (for anything else) — and send them the file.
Why did you make this?
Honestly? Nostalgia. There was a stretch in the late '90s and early 2000s when half the fun of a piece of software was dressing it up — Winamp skins most of all, swapping that little player into a hundred different looks just because you could. Somewhere along the way most software quietly stopped letting us do that. Theme Skinner is a small attempt to bring a bit of it back: the plain joy of making a tool look the way you want it to.