Code Monkey home page Code Monkey logo

chrome-devtools-zerodarkmatrix-theme's Introduction

Update (2017-10-18)

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.

How You Can Help

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.

Only Supporting Stable Channel (Temporarily)

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.

ZeroDarkMatrix Theme for Chrome

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.

Installation

  • 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.

Preview

Elements

elements

elements2

Resources

resources

Timeline

timeline

Network

network

network-headers

Sources

sources

CSS Highlighting

css-highlighting

JS Highlighting

js-highlighting

Console

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

Simon's version also used samples from other templates so I will thank them as well!

chrome-devtools-zerodarkmatrix-theme's People

Contributors

alpadev avatar d3n1c1d3 avatar mauricecruz avatar ntwb avatar outdooricon avatar paulirish avatar restuta avatar s10wen avatar schervenkov avatar soundtricker avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.