https://github.com/timmywil/devtools_themes

This is a repository to hold any themes the web community puts together for Devtools.
https://github.com/timmywil/devtools_themes

Last synced: about 1 month ago
JSON representation

This is a repository to hold any themes the web community puts together for Devtools.

• Host: GitHub
• URL: https://github.com/timmywil/devtools_themes
• Owner: timmywil
• Created: 2011-10-18T14:13:22.000Z (about 13 years ago)
• Default Branch: master
• Last Pushed: 2011-12-01T14:31:28.000Z (about 13 years ago)
• Last Synced: 2024-10-16T00:44:58.764Z (3 months ago)
• Homepage: http://darcyclarke.me/design/skin-your-chrome-inspector/
• Size: 1.44 MB
• Stars: 11
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Devtools Themes

==========================

http://darcyclarke.me/design/skin-your-chrome-inspector/

> “Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the 'theme' or 'brush' of my favorite IDE and my Web Inspector is no different. If you’ve ever done some snooping around Google Chrome’s Web Inspector you may have noticed that it’s made of straight HTML + CSS + JavaScript. My buddy Paul Irish was the one to show me how you can 'inspect' the Inspector (very Inception-esque).

> “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.”

This is awesome! How do I use this?

--------------------------

Pick any theme and drop it in one of these locations depending on your system:

__Mac: ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css__

__PC: C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css__

__Ubuntu (Chromium): ~/.config/chromium/Default/User\ StyleSheets/Custom.css__

Making changes...inspect the inspector!

--------------------

Detach your devtools from the window with the button on the bottom left.  With devtools still focused, open devtools again (⌥⌘I (Command + Option + I) or Control + Shift + I). Customize any styles on the fly then update your Custom.css file.

![Tomorrow Night](/timmywil/devtools_themes/raw/master/tomorrow_night_ben_truyman/preview.png)

### Get [Tomorrow Night](/timmywil/devtools_themes/tree/master/tomorrow_night_ben_truyman) ###