How To Customize Google Chrome DevTools Theme

For most people, the current color scheme in DevTools probably looks fine but the white and grey 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.

Monokai Theme For Chrome DevTools

monokai

Tomorrow Theme

tomorrow

Crate

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/.

goto directory

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.

new devtool
Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail