Main Content

Moz-Mac – A Translucent Firefox Theme

I’ve started playing around with Firefox themes again. One of the great things about Firefox is that the interface can be modified with CSS. With just a few lines of code, I can make it look like whatever I want. This time what I ended up with was Moz-Mac.

Moz-Mac Screenshots
Screenshots: Dark – Default – Light

I started by getting rid of some borders and some spacing to clean up the interface a little bit. Then I realized that you could make the browser translucent, which I thought looked pretty cool.

I then figured out how to tie the active tab highlight color into MacOS’ accent color which means your Firefox theme is tied to your system settings. It’s awesome that Firefox has CSS properties for this already built in.

I also moved the reload button to the address bar, combined the close and favicon, and am continuing to tweak CSS in order to polish the interface up a little bit.

This works on Mac with the Default, Light, and Dark Firefox themes and in order to enable the modifications you need to create a custom CSS file and tell Firefox to us it. I have instructions, and all of the code, up on the Moz-Mac GitHub repo if you’d like to use it.

If you’re not on a Mac, then I have no idea what this looks like. Additionally, I’ve only tested it on the latest MacOS 10.15.x and Firefox 72.0.x with my browser configurations. I hope it works in other OS’, but no guarantees.

I’m sure there are issues with add-ons or your configuration of Firefox so feel free to submit a bug report, or a pull request, and I’ll check into it when I get a moment.

Leave a Reply