Firefox Css Theme MCP server

Firefox CSS Theme

A toolkit for Firefox CSS theme authors to scaffold, bundle, and live-debug theme repositories. It also provides end users with an automated installer.

A Model Context Protocol (MCP) server is also available for AI-assisted DOM inspection and live styling.

Requirements

• Node.js >= 20
• Firefox Browser

Getting Started

For Theme Authors

Scaffold a new theme project using npx:

npx firefox-css-theme create

This interactively prompts for your theme name and stylesheet targets (userChrome.css, userContent.css, or both), creating a minimal npm package with helper scripts and dependencies.

Alternatively, add firefox-css-theme as a development dependency to an existing project:

npm install --save-dev firefox-css-theme

Add helper scripts to your package.json:

{
	"scripts": {
		"start": "firefox-css-theme start", // launch Firefox with live CSS hot-reloading
		"install:theme": "firefox-css-theme install" // installer script for users
	}
}

[!NOTE]

Theme entry files (userChrome.css and/or userContent.css) must be located at the repository root directory.

For End Users

When users clone your theme repository, they only need to run the installer:

# Clone the repository and install dependencies
npm install

# Installer the CSS theme
npm run install:theme

If multiple Firefox profiles exist, an interactive selection list will prompt you to choose one. To skip the selection, specify the target profile directly with -p, --profile .

For the full list of CLI options, run npx firefox-css-theme --help in your project.

Commands

firefox-css-theme create

Scaffold a new Firefox CSS theme package.

Usage

firefox-css-theme create [name] [options]

Options

firefox-css-theme start

Launch Firefox with live stylesheet bundling and hot-reloading.

Usage

firefox-css-theme start [options]

Options

firefox-css-theme install

Install compiled stylesheets into a Firefox profile.

Usage

firefox-css-theme install [options]

Options

[!WARNING]

This operation will overwrite existing CSS themes in the profile unless --merge is specified. A backup is advised.

firefox-css-theme mcp

Start the Model Context Protocol (MCP) server.

Usage

firefox-css-theme mcp [options]

Options

Shortened. The full README is on GitHub.