How to import and move themes (personas) in Firefox

Updated: January 20, 2018

Here's an odd topic. Let's say you have multiple devices on which you run Firefox, without any sign-in or sync functionality enabled. You also have multiple profiles. But you being you, you still have a certain taste, and you happen to be using a number of personas, or lightweight themes, if you will, in your browser. Some of these are no longer available for download, but you want to migrate them between different profiles.

You tried copying portions of your profile contents, like extensions and such, to no avail. A full profile clone will do the trick, but this is not what you want. You're only after a specific theme. At a first glance, it seems there is no way to do this. What now?

Teaser

Problem in more detail

Several weeks ago, I've spent some time using Firefox in its Australis mode, with Firefox 54 rather than Firefox ESR (before the release of Firefox 57), trying to figure out of the upcoming, highly confusing, highly dreaded WebExtensions fiasco is going to be as foobary as expected. Now, that's not the point. Just an intro.

During my testing, I also tried several new themes - including Mozilla's own Compact Light and Compact Dark, a nod toward the classic usage model - with significant disadvantages still, including the location of the Bookmarks Toolbar below the tab controls and too close to the main view area, causing a visual clutter. Then, I also tried a theme called Space Fantasy, which looks kind of neat.

Customize and use themes

Compact, testing

Example

Example, zoomed

On a different device, the Space Fantasy theme did not do the job, so I had it removed. In turn, this made it disappear from the shortlist of available themes in Firefox, and also, I was not able to find it on Mozilla's add-ons site! Supposedly, it should be there, but it isn't. So the question of porting from another profile on another system cropped up.

Missing theme

How to move personas between profiles

The emphasis is of this tricks is how to get personas - IF they are not available elsewhere. Indeed, this is a simple request. If you installed a theme, you want to be able to find it in your Firefox profile. I will show you how to do this, so let's first differentiate between full themes and light themes, also known as Personas, a topic I've discussed ages ago.

Full themes are available inside the extensions sub-directory of the profile folder. The location of the profile depends on your operating system. In Windows, you can find it under:

C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>

In Linux, under:

/home/<user>/.mozilla/firefox/<profile>

Assuming defaults, that is.

Profile, prefs.js file

Now, Personas are available as declarations inside the prefs.js file, once again, inside your profile folder, as shown in the screenshot above. Let's look at a specific section of this file, shall we:

Prefs, open

...
user_pref("lightweightThemes.selectedThemeID", "recommended-2");
user_pref("lightweightThemes.usedThemes", "[{\"id\":\"recommended-2\",\"name\":\"Space Fantasy\",
\"headerURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/2.header.jpg\",
\"footerURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/2.footer.jpg\",
\"textcolor\":\"#ffffff\",\"accentcolor\":\"#d9d9d9\",
\"iconURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/2.icon.jpg\",
\"previewURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/2.preview.jpg\",
\"author\":\"fx5800p\",\"description\":\"Space Fantasy is (C) fx5800p. Available under CC-BY-SA. No warranty.\",
\"homepageURL\":\"https://addons.mozilla.org/
firefox/addon/space-fantasy/\",
\"version\":\"1.0\"},
{\"id\":\"recommended-4\",\"name\":\"Pastel Gradient\",
\"headerURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/4.header.png\",
\"footerURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/4.footer.png\",
\"textcolor\":\"#000000\",\"accentcolor\":\"#000000\",
\"iconURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/4.icon.png\",
\"previewURL\":\"resource:///chrome/browser/content/
browser/defaultthemes/4.preview.png\",
\"author\":\"darrinhenein\",\"description\":\"Pastel Gradient is (C) darrinhenein. Available under CC-BY. No warranty.\",
\"homepageURL\":\"https://addons.mozilla.org/firefox/
addon/pastel-gradient/\",
\"version\":\"1.0\",\"updateDate\":1499641520955,
\"installDate\":1499641520955}]");
...

Looks complicated and ugly - do note I've broken the lines for clarity on purpose! But let's understand what we have here. We have several user preferences (user_pref). The first one, labeled lightweightThemes.selectedThemeID defines which one is active. So far so simple.

The second one lightweightThemes.usedThemes is a comma-delimited list of the themes you have currently in your system - you can check these via Tools > Addons > Appearance, too. The list follows an ugly JSON-like format but that shouldn't worry you.

List of themes

If you want to migrate personas from one profile to another, then you merely need to copy a part of this declaration and paste it in the relevant target profile. Specifically, we want to copy the Space Fantasy persona. Each theme is defined by curly brackets, and separated from others by a comma. Here's the slightly more sanitized section:

{\"id\":\"recommended-2\",
\"name\":\"Space Fantasy\",
\"headerURL\":\"resource:///chrome/browser/content/browser/->
-> defaultthemes/2.header.jpg\",
\"footerURL\":\"resource:///chrome/browser/content/browser/->
-> defaultthemes/2.footer.jpg\",
\"textcolor\":\"#ffffff\",
\"accentcolor\":\"#d9d9d9\",
\"iconURL\":\"resource:///chrome/browser/content/browser/->
-> defaultthemes/2.icon.jpg\",
\"previewURL\":\"resource:///chrome/browser/content/browser/->
-> defaultthemes/2.preview.jpg\",
\"author\":\"fx5800p\",
\"description\":\"Space Fantasy is (C) fx5800p. Available ->
-> under CC-BY-SA. No warranty.\",
\"homepageURL\":\"https://addons.mozilla.org/firefox/addon/->
-> space-fantasy/\",
\"version\":\"1.0\"}

P.S. Desktop users: the -> characters are mine, and they indicate the specific directive flows over to the next line. FYI, it's just a list of key:value pair directives, separated by commas, and with special characters explicitly declared (quotation marks " become \"). Ugly and nerdy.

So now, you open the source Firefox profile, open the prefs.js file, go to the lightweightThemes.usedThemes section, locate the theme you want to migrate over to a different profile and save the specific section to a text file somewhere. The necessary section will start with a curly bracket, end with one, and it will contain the different fields as above, in one smooth, flowing line. Unlike my example, which is broken into multiple lines for brevity, it will be one very long line. Pay attention to that.

In the target profile, open the prefs.js file, go to the lightweightThemes.usedThemes section, and insert the snippet of text at the beginning or end of the line, making sure you keep the syntax correct. Notice the position and presence of opening and closing square and curly brackets, and commas.

Launch Firefox, and you should now have the missing personas in the target profile, and you can apply them as you see fit. This is a useful trick for when lightweight themes suddenly go missing, or you cannot find them online.

Conclusion

This is a nerdy article. In fact, prefs.js is your source of joy, pain and wonder when it comes to Firefox, and if you have an inkling of knowledge in HTML and CSS, much like desktop themes in Linux, you can start hacking the browser to look and behave as you see fit. Sounds crazy, but that is the modern world right there. JSON is your modern purgatory.

Still, all this philosophical deliberation aside, I hope you find this article useful. Sometimes, personas may come and go or disappear, and it could drive you crazy not being able to use them again, especially since Firefox does not offer a trivial way to migrate and import themes among different profiles. Hopefully, here be guide offers the needed workaround. It's not the easiest or the prettiest, but it gets the jobs done. See you around.

Cheers.

You may also like: