Knowledge for the World

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.

In these interests [?]
1

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 Developer Tools Experiments
2

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.

Enable custom UI themes
3

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.

Download a theme
4

Open Developer Tools

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

Open Developer Tools