Tell Chrome Developer Tools to use a dark theme

Tell Chrome Developer Tools to use a dark theme

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. As a fan of Sublime Text 2, and its color scheme, I thought I'd give it a shot -- and wow, what a difference.


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.


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!