Update: As of version 33, the Chrome Team have changed Custom User Stylesheets and there is a new API for DevTools themes to use. ~ Paul Irish
Developing Themes: If you’d like to develop a theme, follow the guide in the sample-devtools-theme-extension.
- Open chrome://flags and Enable Developer Tools experiments.
- Open developer tools settings, select Experiments tab, and check Allow Custom UI Themes.
- Install any theme, you can search for “devtools theme” on the Chrome Web Store. It’ll also keep you up to date.
With this knowledge, I acquired the help of my good friend Wes Bos. Together we went looking for a way to customize our installs. Luckily enough, the Chromium team have set us up with a nice way of inserting our own CSS.
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to. To help you get started, I’m posting my
Custom.css file for you to use. I’ve documented almost all the selectors so it should be easy to modify. Check it out below:
Note: You can check out more selectors and default CSS by copying + pasting the URL below in to your version of Chrome: