A highly customized dark theme for Google Chrome. There are 2 versions:
Custom.css Tested on Chrome Canary Channel v. 33.0.1706.0 canary
Custom-Stable.css Tested on Chrome Stable Channel v. 31.0.1650.57 m
As of v.33.0.1706.0, Chrome Canary no longer supports custom stylesheets in the User Stylesheets directory.
@darcyclarke filed an issue to restore this functionality. Feel free to voice your opinions there.
In the interim, you can inject styles through the inspector's inspector.
There are two installation methods:
Requires you to have Ruby and Rake installed. Clone this repo and run rake.
This will install the theme on all profiles for both Stable & Canary. It will backup any existing one to Custom-backup.css prior to overwriting.
Pick from the snippets below.
Canary
curl -o ~/Library/Application\ Support/Google/Chrome\ Canary/Default/User\ StyleSheets/Custom.css https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom.css
Stable
curl -o ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom-Stable.css
Canary
powershell -Command "& {(new-object System.Net.WebClient).DownloadFile(""https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom.css""","""$env:APPDATA\..\Local\Google\Chrome SxS\User Data\Default\User StyleSheets\Custom.css""")}"
Stable
powershell -Command "& {(new-object System.Net.WebClient).DownloadFile(""https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom-Stable.css""","""$env:APPDATA\..\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css""")}"
Canary
powershell -Command "& {(new-object System.Net.WebClient).DownloadFile(""https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom.css""","""$env:APPDATA\Google\Chrome SxS\User Data\Default\User StyleSheets\Custom.css""")}"
Stable
powershell -Command "& {(new-object System.Net.WebClient).DownloadFile(""https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom-Stable.css""","""$env:APPDATA\Google\Chrome\User Data\Default\User StyleSheets\Custom.css""")}"
curl -o ~/.config/chromium/Default/User\ StyleSheets/Custom.css https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom.css
All code highlighting has been moved to the top of the stylesheet. Feel free to fork and customize to your liking.
You can adjust the line height for the Elements/Sources Tab, Find, and Console interfaces. It's the first set of selectors in the stylesheet. More info...
Animations may cause performance issues depending on the power of your machine. If you notice any issues, you can simply delete the animation section from the stylesheet.
Some extensions don't display well with this theme so I modified the css to improve the presentation. Copy the css file into its respective extension folder.
- Majority of inspector chrome re-styled
- Customized Scrollbars
- Animations for ** finding elements ** setting elements inactive ** elements/sources/network panels
- Subtle pulsating element selection
- Re-styled Popovers (PSD files included)
- Child element styling in elements panel
- Thanks to Simon Owen for the base styles. I used his So-Dark-Monokai-v3 as a starting point.
- CSS Tricks for the tutorial on customized scrollbars.
- Animate.css for some of the animations.
Simon's version also used samples from other templates so I will thank them as well!
- IR_Dark_Monokai - Designed and developed by Andres Pagella (@mapagella)
- Todd Werth's IR_Black
- toolbar code from Harris Novick
- Inspired by Darcy Clarke's blog post
- Automatic rake file Rodolfo Puig