chrome-devtools-zerodarkmatrix-theme's Introduction

ZeroDarkMatrix Theme for Chrome

A highly customized dark theme for Google Chrome. There are 2 versions:

Custom.css Tested on Chrome Canary Channel v. 30.0.1563.0 canary

Custom-Stable.css Tested on Chrome Stable Channel v. 28.0.1500.71

Code Highlighting

All code highlighting has been moved to the top of the stylesheet. Feel free to fork and customize to your liking.

Animations

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.

Preview

Elements

###Resources

###Network

Sources

CSS Highlighting

JS Highlighting

Console

Features

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

Instructions

Copy Custom.css and paste in:

Mac:

~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

Ubuntu (Google Chrome):

~/.config/google-chrome/Default/User\ StyleSheets/Custom.css

Ubuntu (Chromium):

~/.config/chromium/Default/User\ StyleSheets/Custom.css

%APPDATA%\..\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

PC (Windows XP):

C:\Documents and Settings\YourUsername\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Todos

Style Timeline
Style Profiles
Style Audits

Credits

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!