Change your Chrome Inspector theme

If you are a seasoned web developer or just starting out, your probably already got your text processor tools (Coda, Sublime Text, Notepad++ etc) switched to costume themes. Most developers make them dark to make it easy on the eyes. Plus you look a LOT cooler if you have a screen with a bunch of black boxes with cryptic looking text (people will walk buy and be “wow, this guy must be really smart if he understands all that hacker language). …Anyway this guide will show you how to change your Chrome inspector to match your text editor theme, that way everything stays consistant

How it works

Chrome already has this built in. All you have to do is drop a CSS theme file (custom.css) into a specific folder and you are done.

Where to put your custom.css theme file


[box type=”general”]~/Library/Application Support/Google/Chrome/Default/User StyleSheets/[/box]


[box type=”general”]C:Users**Your username**AppDataLocalGoogleChromeUser DataDefaultUserStyleSheets[/box]

Linux (chromium):

[box type=”general”]  ~/.config/chromium/Default/User StyleSheets/[/box]


Is there a default css file i can just edit?

yes sir you can. Open your chrome browser and point it to: [highlighted]chrome-devtools://devtools/devTools.css[/highlighted]


I am lazzy can i download some one else’s themes?

yes, you can here are some that i found on the internet:

[box type=”info”]

3 Pre-made Chrome Themes that i like


More themes can be found here:


Got cool skins? Let us know in the comments