The fix to continue support for custom devtools themes landed in m62. The new method injects the custom stylesheet into every shadow root that gets rendered. This caused devtools to be super sluggish especially with the shadow piercing combinators. I haven't finished refactoring the styles, but I decided to release it early to address some of the performance and style issues.
Please file issues for anything that seems broken/unstyled.
I'm trying to prune as much css as possible to improve performance. Haven't figured out a good way of verifying if a selector is was removed/deprecated by the Chrome Team other than searching the code base. And that's a slow and painful process.
If you want to pitch in with the cleanup, feel free to create pull requests.
The css combinators used to override the devtools CSS is deprecated and support will be removed from Chrome in m63 (~ December 2017). The Chrome Team will continue to support custom themes by changing the implementation.
The implementation change requires a rewrite of this theme. During this time, only stable channel will be supported.
A highly customized dark theme for Google Chrome.
Stable and Canary channels are officially supported. Beta and Dev channels will work, but I'm not testing on them.
➡ Please follow development for this theme at zero base themes.
- Add Zero Dark Matrix from the Chrome Web Store.
- Open
chrome://flags/#enable-devtools-experiments▶ Enable Developer Tools experiments and click "Relaunch Now" at the bottom. - Open developer tools settings ▶ Experiments ▶ [✔] Allow custom UI themes. Reopen the developer tools.
- 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