TL;DR

This is a “new-to-me” feature that has been around since February 2016. Just this week I discovered the Dark Theme in Google Chrome’s Developer Tools (aka DevTools or Debugger). In my defense I don’t spend much time using the DevTools – I only open them when I need to debug a web application that I’m building.

To enable the Dark Theme, use the following steps (using Chrome version 73):

1. In Chrome, press F12 to open the DevTools.
2. Select Settings from the DevTools menu to open the Preferences (or press F1).
3. Under the Appearance section, switch the Theme from Light to Dark.
4. Enjoy the goodness of the dark-side!

See below for more details.

Background

For several decades the universal appearance of text and code editors in the mainstream Microsoft world were based on a white background with darker colored text. This is how I spent the first 20+ years of my professional career as a software developer.

Sure, a dark background with lighter text (originally green, right?) has been around since the earliest days of mainframe systems. And no doubt remnants of that world have remained popular ever since (VIM or Emacs, anyone?).

But for those of us who lived exclusively in the Microsoft/Windows worlds, it was a big change to see a new “Dark Theme” start to make its way into mainstream use around 2012. Many software developers who started their careers after that time have never used anything besides Dark Themes.

And by my own estimation, the Dark Themes have all but replaced Light Themes as the de facto standard for text editors and software development tools.

(Note: While there may have originally only been one choice for a Dark Theme in some tools, there are currently many variations of color themes that can be applied.)

My Journey

I admit that I was stubborn. I was too set in my ways to switch to using the Dark Theme in Visual Studio and Visual Studio Code, at least that was the light-hearted accusation from a younger coworker. I had tried switching to Dark Themes on several occasions over the years, but I always found the text colors representing the syntax of the code too difficult to read.

The reality is that I’m a big fan of productivity and I had never found myself at a point where I was willing to sacrifice my productivity for long enough to re-learn the new colors that came along with Dark Themes. In my defense, some of the earlier Dark Theme variations really did seem to have colors that were a bit too similar to each other   or, in some cases, too difficult to even read on a dark background (i.e. dark purple).

Finally, in 2018 I decided to give it yet another shot. I was using primarily VS Code at the time and I was able to select a variation of the Dark Theme that suddenly seemed much easier to read than before. I’m not even sure which of the many available themes I first used, but I liked it enough to spend the necessary time to retrain my eyes to prefer it.

And then I switched to a Dark Theme in Visual Studio. And then I switched to a Dark Theme in Microsoft Office apps. And then in Windows 10.

Epiphany

So after finally training myself to prefer Dark Themes, it seemed a bit shocking to see a white background on the few occasions that I had to use the Developer Tools in Google Chrome.

What an epiphany to finally spot the Dark Theme option in the DevTools Preferences. I felt like I had tricked the dog into bringing me the (Dark-themed) key to the (Light-themed) jail cell!