Tell Chrome Developer Tools to Use a Dark Theme

Zach Zach (248)
2 minutes

As a web developer, I stare at Chrome's developer tools -- particularly the Elements and Console tabs -- all day long. As a result, all light and no dark makes Zach's eyes dull and tired. A coworker alerted me to the fact that as of very recently you can change the theme in Chrome to dark mode. As a fan of Sublime Text and its color scheme Monokai, I thought I'd give it a shot -- and wow, what a difference.

Posted in these interests:
h/webdev60 guides
h/chrome27 guides
h/webdesign17 guides
Chrome developer tools dark theme

The latest version of Chrome now sports a native dark theme, which can be activated using the Selecting "Dark" from the Theme dropdown in the Appearance Settings area.

However, Option 2 (below) provides overall better syntax highlighting (similar to the Monkai theme in Sublime Text), should you desire a better experience.

Interest mentioned here
h/sublime 3 guides
Sublime Text is an awesome source code and text editor for Mac, Windows and Linux.
Option 2: Enable Developer Tools Experiments

Navigate to chrome://flags in your address bar. Flags allow you to access more advanced browser configuration. Scroll down to "Enable Developer Tools experiments" and click Enable.

Enable custom UI themes

Open Developer Tools. Click the settings icon (the sprocket icon in the top right) and select "Experiments". Scroll down and check the box next to "Allow custom UI themes". Close Developer Tools.

Download a theme

There's an excellent dark theme called DevTools Theme: Zero Dark Matrix. Click here to download it from the Chrome Web Store. The theme downloads as a browser extension. Download and enable the extension.

Open Developer Tools

No need to restart your browser -- simply open Developer Tools and you'll be good to go!

Change your Mac's appearance to light, dark, or auto.
1 minute

One of the great features of macOS Yosemite and later is Mac user's ability to change the default Light appearance of Macs to Dark Mode.