**EDIT** ShadowFox

After writing this, I wasn’t quite satisfy with my current dark theme in Firefox like the context menu. Then I found out about something important for dark firefox: ShadowFox!

I have seen its name once before, but I thought it was a fork of Firefox, but today after giving it a great look, it is more of stylesheet customisation on existing install. It is really easy to configure. For Firefox >69, you would need to enable custom stylesheet as per instruction. There are a few more customisation on their website (e.g. I have picked hide address bar and close button in tabs).

join the dark theme

Original content

This will be the first in the series that talks about tweaks for dark theme, and we will start with firefox.

First of, will be the easy one: the dark theme setting under Add-ons (Ctrl+Shift+A) -> Themes. Obviously, set this to the dark one. Next will be the Developer Tools (F12), which burnt my eyes for quite some times before i realised the native dark theme setting at the …->Settings F1 on the right top corner! These will just darkify the firefox UI partially, but not the content. This is where extensions come to rescue!

First of is the Dark Reader as the first step to the dark side. It is the best you can get, however, some sites might not be really visible (e.g. radio buttons). Therefore, assigning shortcut to toggle current site (I have Ctrl+Alt+A) is almost a must. Besides that, for some websites (I believe those with more dynamic content/scripts), having this extension could significantly slow them down or even unresponsive for a couple of seconds. Thus, I really recommend using native site’s dark theme whenever possible (e.g. Facebook, YouTube etc) or using Stylus for frequently visit sites.

Stylus is an extension that applies user-crafted stylesheets onto sites. Here are some of the stylesheets I recommended:

  • Dark Stylus: keeps Stylus itself (extension popup, manage style page and style editor page)
  • Google - Clean Dark: for the search
  • Dark Gmail by DM: for the Gmail content, which for unknown reason is not taken care by gmail’s native dark theme
  • Dark-WhatsApp by Vednoc
  • Dusky Gray Facebook [Dark Theme]

One negative aspect of Stylus is that recently, the Find style inline in the extension popup is taking ages and gives no result. And for reason unknown, finding the website https://userstyles.org always take quite a long while to load :/ Some times later, you will eventually start customising the style yourself. By that time, developer tools F12 will be your best friend! And bear in mind that colours can be unset as well (e.g. background: unset;). The “attributes” (not sure about the right term here) I have used so far are background, color, background-color, box-shadow, border, text-shadow.