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.
