Firefox Css Theme

MCP for building, inspecting, and live-debugging Firefox UI and CSS themes.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "firefox-css-theme": {
      "command": "npx",
      "args": [
        "-y",
        "firefox-css-theme"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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:

Terminal

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:

Terminal

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

Add helper scripts to your package.json:

JSON Config

{
	"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:

bash

# 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 <name>.

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

bash

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

Options

Option	Description
`-t, --target <target>`	Stylesheet target: both, chrome, or content
`-f, --force`	Proceed without warning

`firefox-css-theme start`

Launch Firefox with live stylesheet bundling and hot-reloading.

Usage

bash

firefox-css-theme start [options]

Options

Option	Description
`-b, --binary <path>`	Path to Firefox executable
`-p, --profile <name>`	Firefox profile name
`--no-watch`	Disable file watching
`--headless`	Run in headless mode
`--nova-ui`	Enable Firefox Nova UI

`firefox-css-theme install`

Install compiled stylesheets into a Firefox profile.

Usage

bash

firefox-css-theme install [options]

Options

Option	Description
`-p, --profile <name>`	Firefox profile name
`-m, --merge`	Merge with existing stylesheets
`-f, --force`	Proceed without warning

[!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

bash

firefox-css-theme mcp [options]

Options

Option	Description
`-b, --binary <path>`	Path to Firefox executable
`-p, --profile <name>`	Firefox profile name
`--headless`	Run in headless mode
`--nova-ui`	Enable Firefox Nova UI

MCP Server Usage

The MCP server enables AI assistants to inspect the Firefox chrome DOM, query computed styles, inject custom CSS, and capture UI screenshots in real time.

MCP Usage Example - Customising Close Tab Button

Configuration

Add the server to your preferred client or development environment:

Claude Code

Terminal

claude mcp add firefox-css-theme -- npx -y firefox-css-theme mcp --nova-ui

Codex

bash

codex mcp add firefox-css-theme -- npx -y firefox-css-theme mcp --nova-ui

IDE MCP Configuration

Using npx:

config.json

{
	"mcpServers": {
		"firefox-css-theme": {
			"command": "npx",
			"args": ["-y", "firefox-css-theme", "mcp", "--nova-ui"]
		}
	}
}

Or using a local build:

config.json

{
	"mcpServers": {
		"firefox-css-theme": {
			"command": "node",
			"args": [
				"/path/to/firefox-css-theme/dist/cli.js",
				"mcp",
				"--nova-ui"
			]
		}
	}
}

Available MCP Tools

launch_browser: Launches Firefox with chrome debugging.
close_browser: Terminates the browser instance.
customize_toolbar: Toggles the Firefox "Customise Toolbar" mode.
get_ui_tree: Dumps the hierarchical DOM tree of selected UI element.
query_ui_elements: Queries elements matching a CSS selector in the browser chrome.
get_computed_styles: Extracts computed CSS property values of a specific UI element.
inject_theme_css: Injects a stylesheet in the live UI.
remove_theme_css: Removes an injected stylesheet.
list_theme_css: Lists all currently injected stylesheets.
take_ui_screenshot: Captures a screenshot of a specific UI component.
execute_chrome_javascript: Runs JavaScript in the browser chrome window context.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Firefox Css Theme

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "firefox-css-theme": { "command": "npx", "args": ["-y", "firefox-css-theme"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Firefox Css Theme AllMCPs Directory Badge

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/firefox-css-theme?style=directory)](https://allmcps.com/mcp/firefox-css-theme)

HTML Embed

<a href="https://allmcps.com/mcp/firefox-css-theme"><img src="https://allmcps.com/api/badge/firefox-css-theme?style=directory" alt="Firefox Css Theme on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

36Quality signal: Fair · 36/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools15/30

Adoption & activity2/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

★ Featured

AllMCPs Server

The official MCP server for AllMCPs.com - submit and manage tools directly from your AI. The open directory for MCP servers. Connect Claude, Cursor, Windsurf, and AI agents to databases, tools, files, and APIs. Explore 10,000+ servers. AllMCPs is the premier, open directory for discovering, evaluating, and installing Model Context Protocol (MCP) servers to equip AI agents and LLMs with real-world superpowers.

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Firefox Css Theme →Install in Claude Desktop Install in Cursor Install in VS Code

Firefox Css Theme

MCP for building, inspecting, and live-debugging Firefox UI and CSS themes.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "firefox-css-theme": {
      "command": "npx",
      "args": [
        "-y",
        "firefox-css-theme"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

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:

Terminal

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:

Terminal

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

Add helper scripts to your package.json:

JSON Config

{
	"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:

bash

# 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 <name>.

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

bash

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

Options

Option	Description
`-t, --target <target>`	Stylesheet target: both, chrome, or content
`-f, --force`	Proceed without warning

`firefox-css-theme start`

Launch Firefox with live stylesheet bundling and hot-reloading.

Usage

bash

firefox-css-theme start [options]

Options

Option	Description
`-b, --binary <path>`	Path to Firefox executable
`-p, --profile <name>`	Firefox profile name
`--no-watch`	Disable file watching
`--headless`	Run in headless mode
`--nova-ui`	Enable Firefox Nova UI

`firefox-css-theme install`

Install compiled stylesheets into a Firefox profile.

Usage

bash

firefox-css-theme install [options]

Options

Option	Description
`-p, --profile <name>`	Firefox profile name
`-m, --merge`	Merge with existing stylesheets
`-f, --force`	Proceed without warning

[!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

bash

firefox-css-theme mcp [options]

Options

Option	Description
`-b, --binary <path>`	Path to Firefox executable
`-p, --profile <name>`	Firefox profile name
`--headless`	Run in headless mode
`--nova-ui`	Enable Firefox Nova UI

MCP Server Usage

The MCP server enables AI assistants to inspect the Firefox chrome DOM, query computed styles, inject custom CSS, and capture UI screenshots in real time.

MCP Usage Example - Customising Close Tab Button

Configuration

Add the server to your preferred client or development environment:

Claude Code

Terminal

claude mcp add firefox-css-theme -- npx -y firefox-css-theme mcp --nova-ui

Codex

bash

codex mcp add firefox-css-theme -- npx -y firefox-css-theme mcp --nova-ui

IDE MCP Configuration

Using npx:

config.json

{
	"mcpServers": {
		"firefox-css-theme": {
			"command": "npx",
			"args": ["-y", "firefox-css-theme", "mcp", "--nova-ui"]
		}
	}
}

Or using a local build:

config.json

{
	"mcpServers": {
		"firefox-css-theme": {
			"command": "node",
			"args": [
				"/path/to/firefox-css-theme/dist/cli.js",
				"mcp",
				"--nova-ui"
			]
		}
	}
}

Available MCP Tools

launch_browser: Launches Firefox with chrome debugging.
close_browser: Terminates the browser instance.
customize_toolbar: Toggles the Firefox "Customise Toolbar" mode.
get_ui_tree: Dumps the hierarchical DOM tree of selected UI element.
query_ui_elements: Queries elements matching a CSS selector in the browser chrome.
get_computed_styles: Extracts computed CSS property values of a specific UI element.
inject_theme_css: Injects a stylesheet in the live UI.
remove_theme_css: Removes an injected stylesheet.
list_theme_css: Lists all currently injected stylesheets.
take_ui_screenshot: Captures a screenshot of a specific UI component.
execute_chrome_javascript: Runs JavaScript in the browser chrome window context.

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Firefox Css Theme

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "firefox-css-theme": { "command": "npx", "args": ["-y", "firefox-css-theme"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/firefox-css-theme?style=directory)](https://allmcps.com/mcp/firefox-css-theme)

HTML Embed

<a href="https://allmcps.com/mcp/firefox-css-theme"><img src="https://allmcps.com/api/badge/firefox-css-theme?style=directory" alt="Firefox Css Theme on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

36Quality signal: Fair · 36/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools15/30

Adoption & activity2/15

Community engagement0/10

★ Featured

AllMCPs Server

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to Firefox Css Theme →Install in Claude Desktop Install in Cursor Install in VS Code