https://github.com/zapSNH/zapsCoolPhotonTheme
A faithful(ish) Firefox Photon theme.
https://github.com/zapSNH/zapsCoolPhotonTheme
firefox firefox-photon firefox-theme userchrome usercontent
Last synced: 3 months ago
JSON representation
A faithful(ish) Firefox Photon theme.
- Host: GitHub
- URL: https://github.com/zapSNH/zapsCoolPhotonTheme
- Owner: zapSNH
- License: gpl-3.0
- Created: 2023-08-09T02:38:11.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T22:57:41.000Z (8 months ago)
- Last Synced: 2024-10-30T07:45:49.440Z (8 months ago)
- Topics: firefox, firefox-photon, firefox-theme, userchrome, usercontent
- Language: CSS
- Homepage:
- Size: 3.05 MB
- Stars: 71
- Watchers: 4
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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** | ✔️ | ✔️ | ✔️ | |
| **136** | ✔️ | ✔️ | ✔️ | |
| **138 nightly** | ✔️ | ✔️ | ? | |
See the [Forks](#forks) section for more information about Firefox forks.
## Installation
There are three (3) ways of installing this theme.
* [Manual Installation 🛠](#manual-installation-)
* [Extension 🧩](#extension-)
* [Git :octocat:](#git-octocat)
____
### Manual Installation 🛠
Installable 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](https://www.userchrome.org/) 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 136](https://github.com/zapSNH/zapsCoolPhotonTheme/releases/tag/v136) **(recommended)** | [Firefox 136](https://github.com/zapSNH/zapsCoolPhotonTheme/archive/refs/heads/main.zip) |
| [Firefox 128esr](https://github.com/zapSNH/zapsCoolPhotonTheme/releases/tag/v136) (download the ESR version) | [Firefox 128esr](https://github.com/zapSNH/zapsCoolPhotonTheme/archive/refs/heads/128esr.zip) |
| [Firefox 115esr](https://github.com/zapSNH/zapsCoolPhotonTheme/releases/tag/v128) (download the ESR version) | [Firefox Beta/Nightly](https://github.com/zapSNH/zapsCoolPhotonTheme/archive/refs/heads/nightly.zip) |
Older Versions
* [Firefox 99](https://github.com/zapSNH/zapsCoolPhotonTheme/archive/refs/heads/archive-v99.zip)
* [Firefox 116 - 119](https://github.com/zapSNH/zapsCoolPhotonTheme/archive/refs/heads/119.zip)
* [Other Versions (Firefox 120+)](https://github.com/zapSNH/zapsCoolPhotonTheme/releases)
____
Extract the zip and move `zapsCoolPhotonTheme-*` (where `*` is `main`, `128esr`, etc.) 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! 🎉
____
### Extension 🧩
Only installable 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](https://github.com/numirias/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](https://github.com/numirias/paxmod#why-cant-i-install-paxmod-as-a-verified-extension-through-mozilla) for the reason. |
All other preferences required to run the theme (see [the table above](#manual-installation-)) will be set automatically.
Download the release for your browser version:
| Browser Version | Extension Version |
|:-:|:-:|
| 128+ | [Latest Version](https://github.com/zapSNH/zcpt-webextension/releases/latest) |
| 115 - 127 | [v0.24.5](https://github.com/zapSNH/zcpt-webextension/releases/tag/v0.24.5) |
More info at: https://github.com/zapSNH/zcpt-webextension/blob/main/README.md
You're done! 🎉
____
### Git :octocat:
Recommended for people who know what they're doing.
Installable 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](#manually-) installation.
Download and install [Git](https://git-scm.com/) 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)](https://github.com/zapSNH/zapsCoolPhotonTheme/assets/134786889/c35ffc7d-0343-479a-9366-72d56833c4c3)
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`)](https://github.com/zapSNH/zapsCoolPhotonTheme/branches). (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](https://github.com/zapSNH/zapsCoolPhotonTheme/wiki/Config-Options).
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 will apply after you click `Apply` (unless you're 𝓯𝓻𝓮𝓪𝓴𝔂).
## Miscellaneous
Firefox Photon icons are primarily taken from Firefox 87 or Firefox 78esr.
Other/newer icons not present in Firefox 87/78esr are primarily based on their Proton/Acorn counterparts.
Special thanks to:
- [black7375's Lepton](https://github.com/black7375/Firefox-UI-Fix)
- [YukisCoffee's Phroton](https://web.archive.org/web/20231124205435/https://github.com/YukisCoffee/phroton/) (r.i.p.)
- The folks over at r/FirefoxCSS
- [Mozilla](https://www.mozilla.org/) since they made Firefox so customizable [and made Photon (but they also made Proton >:()]