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
MAC:
[box type=”general”]~/Library/Application Support/Google/Chrome/Default/User StyleSheets/[/box]
Windows:
[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
- IR Black
- enlightened
- Chrome-Dev-tools-dark-theme <Inverts all the colors
More themes can be found here:
[/box]
Got cool skins? Let us know in the comments