ZeroDarkMatrix Theme for Chrome

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

canary-theme-extension/styles.css Tested on Chrome Canary Channel v. 34.0.1787.2 canary

Custom-Stable.css Tested on Chrome Stable Channel v. 32.0.1700.76 m

About Chrome Canary

As of Version v. 33.0.1726.0, themes only work via extensions and the developer tools experiments.

There is a thread detailing how this method came about.. Feel free to voice your opinions there.

The Canary version is now built using LESS and is hosted in the zero base themes repo.

Installation Instructions

Chrome Canary

• Open chrome://flags and Enable Developer Tools experiments.
• Open developer tools settings, select Experiments tab, and check Allow custom UI themes.
• Open the Chrome Extensions, select 'Developer mode', and load the canary-theme-extension folder as an unpacked extension.

Chrome Stable

There are two installation methods:

Rakefile

Requires you to have Ruby and Rake installed. Clone this repo and run rake.

This will install the theme on all profiles. It will backup any existing one to Custom-backup.css prior to overwriting.

Copy/Paste

Pick from the snippets below.

Mac

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

PC (Windows Vista / 7 / 8)

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""")}"

PC (Windows XP)

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""")}"

Fedora:

curl -o ~/.config/google-chrome/Default/User\ StyleSheets/Custom.css https://raw.github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme/master/Custom-Stable.css

Code Highlighting

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

Readability

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... Thanks to @orloxx for the suggestion.

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

Timeline

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

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!

• 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