Z(ap's) Cool Photon Theme

A Firefox userChrome theme designed to be as faithful to Firefox Photon (specifically Firefox 87) as possible.

> (showcase) <

Compatibility

Includes forks of Firefox (Waterfox, Floorp, etc.).

	Windows	Linux (GNOME)	macOS	Notes
115esr	✔️	✔️	✔️	No longer updated.
128esr	✔️	✔️	✔️
133	✔️	✔️	✔️
135 nightly	✔️	✔️	?

See the Forks section for more information about Firefox forks.

 

---

 

Installation

There are three (3) ways of installing this theme.

• Manually 🛠
• As an Extension 🧩
• Using Git

---

Manually 🛠

Can be installed on all editions of Firefox. Configuration is handled in about:config. There is no auto-updating.

Open about:config and set:

Pref	Value	Description
toolkit.legacyUserProfileCustomizations.stylesheets	true	Enables userChrome customization.
svg.context-properties.content.enabled	true	Required for proper icon coloring.
browser.newtabpage.activity-stream.logowordmark.alwaysVisible	false	Reverts the new tab Firefox logo behavior to what it was in Photon.

For Firefox 121 and below...

Pref	Value	Description
layout.css.has-selector.enabled	true	Only for Firefox 121 and below. Required for some functionality to work.
layout.css.nesting.enabled	true	Only for Firefox 117 and below. Required for theming and some other stuff to work.

Optionally, you can set:

Pref	Value	Description
security.secure_connection_icon_color_gray	true	Makes the connection icon gray instead of green. Defaults to true in later versions of Photon.

---

Too lazy to set all these prefs? You can visit https://zapsnh.github.io/zcpt-configurator/, enable Include preferences for theme installation (and maybe customize the theme a bit), and click Export Options to generate a user.js file that you can put in your profile folder.

Make sure to delete the user.js file after you start Firefox so that it doesn't override any changes you make in about:config.

---

Download the release for your browser version:

🪨 Static Release (stability)	🛞 Rolling Release (features and bugfixes)
Firefox 133 (recommended)	Firefox 133
Firefox 128esr (download the ESR version)	Firefox 128esr
Firefox 115esr (download the ESR version)	Firefox Beta/Nightly

Older Versions

• Firefox 99
• Firefox 116 - 119
• Other Versions (Firefox 120+)

---

Extract the zip and move zapsCoolPhotonTheme-* to your profile folder which you can find by going to about:support and opening your profile folder/directory.

Rename the zapsCoolPhotonTheme-* folder to chrome

Make sure the directory is like this:

• Profiles > XXXXXXXX.profile_name_here > chrome > userChrome.css and others

and not like this:

• Profiles > XXXXXXXX.profile_name_here > chrome > zapsCoolPhotonTheme-* > userChrome.css and others

Restart Firefox.

You're done! 🎉

---

As an Extension 🧩

Can only be installed on Firefox Developer Edition, Firefox Nightly, and Firefox ESR (and forks based on these versions) since you need to disable extension signing (which may be insecure).

Has auto-updating and a built-in configurator. This version is based on Paxmod.

Open about:config and set:

Pref	Value	Description
extensions.experiments.enabled	true	Enables extensions experiments which allows CSS theming in extensions.
xpinstall.signatures.required	false	Disables extension signing which may be insecure. See this for the reason.

All other preferences required to run the theme (see the table above) will be set automatically.

Download the release for your browser version:

Browser Version	Extension Version
128+	Latest Version
115 - 127	v0.24.5

More info at: https://github.com/zapSNH/zcpt-webextension/blob/main/README.md

You're done! 🎉

---

Using Git

Recommended for tech-savvy people.

Can be installed on all editions of Firefox. Configuration is handled in about:config. There is no auto-updating (unless you make a script for that) but you can quickly update using git pull in your terminal.

Open about:config and set the same prefs in the Manual installation.

Download and install Git if you haven't already.

Open your profile folder which you can find by going to about:support and opening your profile folder/directory.

If you're in a file manager with a GUI (Explorer, Finder, etc.), open a terminal in the profile folder, usually by right clicking and clicking Open in Terminal (or similar). (example)

Copy (or type) this command into the terminal git clone https://github.com/zapSNH/zapsCoolPhotonTheme.git chrome and press enter. Make sure the terminal is in the profile folder (like Profiles > XXXXXXXX.profile_name_here) and not in any of its subfolders.

If you're using a version of Firefox that isn't the latest stable version then copy (or type) these commands into the terminal.

cd chrome
git checkout BRANCH_NAME

where BRANCH_NAME is your Firefox version (i.e. 115esr or nightly). (don't use the ones prefixed by webextension)

You're done! 🎉

Forks

If you're using a Firefox fork (e.g. Waterfox, Floorp, etc.), you can set these prefs in about:config for theme fixes and adjustments for your browser.

Pref	Value	Browser
uc.waterfox	true	Waterfox
uc.floorp	true	Floorp
uc.librewolf	true	LibreWolf
uc.tor	true	Tor Browser

Configuration

Config options are available at the Wiki.

An interactive configurator is available at https://zapsnh.github.io/zcpt-configurator/. To apply the settings, place the exported user.js file in your profile folder/directory (Profiles > XXXXXXXX.profile), launch Firefox, and then delete the user.js file afterwards.

For the WebExtension version, the configurator can be found in the extension's option page (about:addons > zap's cool photon theme > Preferences/Options). The settings apply after you click Apply (unless you're 𝓯𝓻𝓮𝓪𝓴𝔂).

Miscellaneous

Firefox Photon icons were taken from the omni.ja file from Firefox 87. Other icons that were not in Firefox 87 were made by me.

Special thanks to:

• black7375's Lepton
• YukisCoffee's Phroton (r.i.p.)
• The folks over at r/FirefoxCSS
• Mozilla since they made Firefox so customizable [and made Photon (but they also made Proton >:()]