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.
Recommended Reading: Getting Started With Chrome Developer Tools
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
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.
