As a web designer and developer, my eyes are incredibly important to me and I hate to strain them. If you’re constantly working on the computer in a dimly lit room like me, you definitely want to consider using night mode in developer tools, and you should also be wearing some blue light eliminating glasses while running a scheduled night shift on your display. For generic night mode browsing and reading, I’ve been using the Dark Night Mode Firefox add-on as it works tremendously well. Here’s how to switch to night mode in developer tools in Firefox.
Switch to night mode in Firefox developer tools in just a few steps:
First, you need to open your developer tools by pressing “F12” on your keyboard, or you can right click anywhere inside the browser viewport and then click on “inspect element.” I prefer the F12 keyboard shortcut, but here’s another secret tip for directly accessing a specific element in developer tools: right click on whatever element you wish to inspect and then press “Q” on your keyboard to quickly open developer tools for that element.
Now we need to access the developer tools settings. Look at the top right corner of your developer tools window and you should see three little dots. Left click these 3 dots to access the drop down menu and then click on “settings.” If you’re a keyboard shortcut warrior, you can simply press “F1” to access the settings menu in a single key stroke.
Once you’re in the settings window, look in the center of the window underneath the “Themes” heading. You will see a “dark” and a “light” option. I prefer using the dark option during the evening hours and the light option during the day as it is easier on my eyes.