How to Personalize Your Google Chrome DevTools Theme
For many users, the default white and grey color scheme of DevTools is perfectly adequate, but it can seem mundane after prolonged use. There’s a way to add a splash of color and excitement to your experience.
We’ll guide you through the process of selecting a new theme for your Chrome DevTools and installing it to replace the standard theme colors. Let’s dive in.
Web Design: Getting Started With Chrome Developer Tools
Editor's note: For a newer, updated version of this post, check it out here. Google Chrome is a... Read more
Finding the Theme
Locating a theme for DevTools is straightforward. A quick Google search yields plenty of options. Some themes might change just the syntax highlighting colors, while others might revamp specific panels only.
Yet, some exceptional themes comprehensively transform the entire DevTools interface, including fancy animations. Here are a few of my top picks.
Monokai Theme for Chrome DevTools
Installing the Theme
Installing these themes is a breeze, as they are primarily CSS-based. Start by downloading the CSS file from a chosen source, such as the Monokai Theme.
For macOS users, navigate to Finder, press Command + Shift + G, and enter: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/.
In this directory, an empty CSS file named Custom.css awaits. Open it with your code editor and insert the styles from your downloaded theme.
For Windows and Ubuntu users, locate the Custom.css file here:
Windows 7 and 8: \AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
Ubuntu: ~/.config/google-chrome/Default/User StyleSheets
Changes take effect immediately, no need to restart Chrome. Enjoy your newly styled DevTools!
