How To Customize Google Chrome DevTools Theme

By . Filed in Web Design

For most people, the current color scheme in DevTools probably looks fine but the white and gray combination make look a bit dull, even boring, after facing it for hours at a time. You can actually spice things up a bit.

We are going to show you how to find a theme you can opt for, and get it installed, changing the default theme colors of the Chrome DevTools. Let’s get started.

Finding the Theme

Finding a DevTools theme isn’t hard. A simple search query in Google will give you several result already. Note that some of the theme files may only alter the syntax highlighting color scheme, while others theme may only alter particular panels.

However, there are a few awesome themes such as Elements, Resources, Network, Profile and Console that alter the whole DevTools panel and can also include a little fancy animation on top of it. The following are a few of my favorites.

Zero Dark Matrix

Monokai Theme For Chrome DevTools

Tomorrow Theme

Crate

Installing the Theme

The themes are based on CSS and is very easy to install. First, download the CSS file from one of the above sources. In this example, I’m going to use Monokai Theme.

If you are working on OSX, go to Finder and hit Command + Shift + G, and paste the following directory path: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/.

Under this directory, you will find an empty CSS file named Custom.css. Open it in the code editor and paste the styles from the theme into it.

For Windows and Ubuntu OS, you can find the Custom.css under the following directory.

Windows 7 and 8: \AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css.

Ubuntu: ~/.config/google-chrome/Default/User StyleSheets.

The effect is instant and you don’t have to restart Chrome. Your DevTools should now have a new fresh look, like so.

You can find more DevTools themes at DevThemez. In addition, the theme is persistent. You need not worry that it may be overwritten when you update Chrome.

Author:

Thoriq is a writer for hongkiat.com. He is also a web developer with very unpredictable sleep cycle.

Advertisement