The most future-proof way to restore the utilitarian pre-2021 Photon look in modern LibreWolf is to use custom styling, what’s technically known as browser chrome1. Fortunately, we don’t need to do it from scratch, someone’s done the hard work for us.
Note: This assumes LibreWolf is installed on a Linux computer via flatpak. If you’re not using flatpak, you’ll need to edit the code I’ve given you before running it. The code will still work, but the paths will be different. For example, your .librewolf directory might be ~/.librewolf, or ~/.local/share/.librewolf. You can find out where it lives within LibreWolf itself by opening the Help menu and choosing “More troubleshooting information”. If you’re using MacOS, Windows, or NetBSD, I can’t help you, sorry.
Step 1: Override some settings
First, we need to override some settings to turn the most recent Nova redesign off and enable custom styling. There are two ways to do this: via the terminal, or via about:config. You will have to use the terminal at some point, but you can do the initial setup in about:config if you prefer. It’s not necessary to close LibreWolf at this point.
Via terminal:
Run this terminal command:
cat << ’EOF’ > ~/.var/app/io.gitlab.librewolf-community/.librewolf/librewolf.overrides.cfg defaultPref(”browser.nova.enabled”, false); defaultPref(”toolkit.legacyUserProfileCustomizations.stylesheets”, true); defaultPref(”svg.context-properties.content.enabled”, true); defaultPref(”layout.css.color-mix.enabled”, true); EOF
Via about:config:
Type about:config into the URL bar while LibreWolf is running and press enter. Click “Accept the risk and continue” if prompted. Using the “Search preference name” box at the top of the page that appears, search for each of the following preferences, and double-click as necessary to change the value. Changes take effect immediately (you may not see anything different at this stage though). If you change the wrong setting, it will appear in bold to help you identify it, you can always click “Reset to default” on the very right of that setting’s row.
- browser.nova.enabled - set to false
- toolkit.legacyUserProfileCustomizations.stylesheets - set to true
- svg.context-properties.content.enabled - set to true
- layout.css.color-mix.enabled - set to true
Step 2: Find your profile directory
Your profile directory is where LibreWolf keeps your personal data. To find out where it is, open LibreWolf, then open the Help menu, then choose “More troubleshooting information”. A whole lot of stuff will appear, but we’re only interested in one thing: “Profile directory”. You’ll see a button labelled “Open directory” which you can ignore. Instead, copy the full path next to it. For me it was /home/cal/.var/app/io.gitlab.librewolf-community/config/librewolf/librewolf/weibhvnm.default-default.
Step 3: Install the custom chrome1
First, close all LibreWolf windows.
Open a terminal and type “cd”, press space, then paste the directory from your clipboard. I find it easier to use the menus to paste into a terminal, but right-clicking or Ctrl+Shift+V might work. Press enter.
Now run the following commands2:
git clone -bphoton-style https://github.com/black7375/Firefox-UI-Fix.git chrome ln chrome/user.js user.js
Once the command completes, you’re done! Open LibreWolf and make sure everything works! If something breaks, you can always delete the chrome directory and the user.js file from your profile directory.
To renew your changes
If things break in the future, you don’t need to do all of this again! All you need to do is update the chrome. Close LibreWolf and run these two commands in a terminal:
cd <whatever your profile directory was> git pull
Credits
https://github.com/b … k7375/Firefox-UI-Fix - the Lepton project, which has painstakingly re-implemented previous Firefox UIs basically from scratch after Mozilla completely excised them. This would be utterly impossible without their hard work, and their guide to doing it on Firefox, on which this guide is based.