Acorn Themes

Firefox themes, organized by collection. Sources live under themes/<collection>/<theme>/manifest.json; the build step normalizes color values to RGB(A) arrays and emits shipped-ready manifests to dist/.

The first collection is profiles: the 9 colors used by Firefox's Selectable Profiles feature, based on Acorn's color palette.

How it works

Source manifests live at themes/<collection>/<theme>/manifest.json. Each one is a single, merged static-theme manifest (theme + dark_theme + browser_specific_settings.gecko.id) so light and dark variants ship together. Color values may be OKLCH, hex, named CSS colors, or RGB(A) arrays; the build script normalizes them.

dist/ is generated by the build step and is gitignored. Anything else (scripts, schemas, CI) supports the build and validation.

Build

npm install
npm run build

This converts every value inside theme.colors and dark_theme.colors to an RGB array (or RGB+alpha array when alpha < 1) and writes the result to dist/<collection>/<theme>/manifest.json. Everything outside those two color maps is copied through unchanged.

Adding a new theme

1. Create themes/<collection>/<color>/manifest.json following the existing files as a template.
2. Set name, version, and a unique browser_specific_settings.gecko.id.
3. Fill in theme.colors (light) and dark_theme.colors (dark) in whatever color format is convenient.
4. Run npm run build and load dist/<collection>/<color>/manifest.json in Firefox via about:debugging → "Load Temporary Add-on" to verify.

To start a new collection, just create a new directory under themes/ and put theme folders inside it.