A live theme builder for Headlamp — pick colours in the left panel, see them applied to a real MUI preview on the right, then download a ready-to-install Headlamp plugin zip.
- Live preview of navbar, sidebar, cards, and buttons
- Edit light and dark variants independently
- Theme library with bundled palettes and import from JSON files or URLs
- Downloads an installable compiled Headlamp theme plugin zip
- Customise generated plugin name, version, description, and author before download
- Includes an uploaded custom logo in the generated plugin
- Terminal and ANSI colour controls for Headlamp terminal/log views
Use Import JSON for local theme files, Import URL for JSON hosted somewhere public, or Load public library to browse importable themes hosted by this project. URL imports run in the browser, so the host must allow CORS. GitHub file URLs and raw GitHub URLs work well. Use Save / Load > Copy share link to share the current light/dark theme state from the website.
Example theme JSON files are in examples/themes. JSON schemas are in schemas. The generated public catalog is in library.
Planned improvements are tracked in ROADMAP.md.
npm install
npm run dev- Unzip the downloaded file
- Copy the generated plugin folder to your Headlamp user-plugins directory:
- Windows:
%APPDATA%\Headlamp\Config\user-plugins\<plugin-name>\ - Linux/macOS:
~/.config/Headlamp/Config/user-plugins/<plugin-name>/
- Windows:
- Restart Headlamp and select your theme in Settings → General → Theme.
The zip includes main.js at the plugin root, so it is ready to install without running a build. It also includes src/, tsconfig.json, and dist/main.js if you want to edit or rebuild it later.
If an older downloaded theme plugin shows as incompatible in Headlamp, download it again from the current builder. Newer downloads include the compatibility metadata Headlamp expects.
- React 19 + TypeScript
- Vite 8
- MUI v9
- react-colorful (colour pickers)
- JSZip + file-saver (plugin download)
Logo and project author: Pixelrobots.