Making the Title Bar dark in Firefox on a Mac in dark mode, and tree style tabs only

OK so I know this is probably going into the weeds way too much for most readers (if there even is anyone currently reading my blog), but this has been an annoyance to me for some time.

I use Mozilla Firefox as my primary browser and have for a good many years. Now I use Safari on iOS because all browsers on iOS are using the same Safari engine anyway, so might as well use Apples. And I do use Safari once in a while on my mac, especially to manage my bookmarks which manage to get pretty messed up at least once a month so I need to go back to my most recent backup of Firefox bookmarks and replace them to clean them up, but for general browsing I use Firefox.

Now I recently took a jump into trying out using Vivaldi browser, because it has built in ability to have my tabs on the left or right, but I don’t like them as well as Firefox’s plug in Tree Style Tabs, plus I find Vivaldi to be a bit of a resource hog when I have a lot of tabs open and I often have way too many tabs open. Don’t get me wrong it is a good browser, but I have always preferred Firefox even if it supposedly more of a resource hog than either Chrome or Safari. I have always liked it plug ins better, and it just the most customizable especially if you delve into the about:config settings and even more so if you delve into CSS by customizing your userChrome.css file (which is a text file you put into your profile folder within a chrome folder.

Because I use Tree Style tabs on the left of my browser, I have wanted to get rid of the tabs along the top and with some coding help I managed that.

I added the following to my userChrome.css file and this hides the top tabs, which saves a little space at the top of my browser.

/* hides the native tabs */
#TabsToolbar {
  visibility: collapse;
}

Now I wanted to make the damn white title bar at the top be dark. I know it was possible to get rid of it (and it is gone on Windows already), but I like having the site title at the top.

Now to get some help I posted my question in the Reddit Firefox CSS section and got the answers very quickly.

So again I entered about:config in the url bar of Firefox to go into the advanced settings.

And first set browser.tabs.drawInTitlebar to true, and it was set to false which allows the OS to draw the title bar, when set to true Firefox draws the title bar so the color can be changed using a #titelbar tag in the css. When I set this the title bar went away, but I was able to turn it back on in the customizetoolbar settings. To get there right click in the toolbar and select customize toolbar,

Then in the bottom right hand corner there is a checkbox for the title and I turned it back on, though it was still bright.

Next again in about:config, I set the setting for widget.macos.respect-system-appearance to true, which made the title bar follow the settings for dark mode, and now my title bar is dark. WOOHOO!

No more top tabs and the title bar is dark, I couldn’t be happier!

The Best Dark Mode Browser plug in to make all those bright web sites dark is Dark Reader

As soon as I switched my Mac to dark mode, I immediately began to hate all the white on web sites. It is glaring to see so much white on web sites, when everything else on your computer is dark. Some web sites, switch from bright to dark when they detect dark mode, but most have done nothing about it. So it turns to web browser plug ins fill in the gap. Unfortunately most do not work well.

My favorite is the free open source Dark Reader. It is available for Chrome, Firefox, Safari and Edge, though strangely costs $5.99 for safari, and doesn’t work quite the same with the site list, though it still does the conversion of pages just as well.

The plug in gives you options to change your settings on a site by site basis.

And you can keeps sites from being affected or set individual sites to work. It is a great plug in and works the best of any dark mode I have seen and it doesn’t send your user’s data anywhere.