Froots Sample Theme

A working template for building Froots community themes.

What a theme is

Two files in a folder:

Sample Theme/
├── manifest.json   name, version, minAppVersion, author, modes
└── theme.css       CSS variable overrides

A theme never ships code — it's pure CSS custom-property overrides layered on top of the app's built-in look. Exactly one theme is active at a time (Settings → Themes); the user's accent color still applies on top of yours.

theme.css documents the full variable contract inline: core surfaces (--shell, --panel, --card-1/2, --ink), the 10-color palette, shape tiers, and the shadcn component variables.

Developing

1. Copy this folder to <app data>/workspace/themes/Sample Theme/ (Settings → Themes → "Open themes folder").
2. Settings → Themes → apply it.
3. Edit theme.css → hit Refresh / re-apply. The dev folder is the install folder.

Rename the folder + name in manifest.json (they must match) before publishing.

Releasing

1. Bump version in manifest.json.
2. Create a GitHub release whose tag exactly equals the manifest version.
3. Attach manifest.json and theme.css as release assets.
4. Include a 16:9 screenshot (512×288 recommended) in your repo — the community registry lists themes visually.