remybach / chrome-twilight

Chrome Inspector Twilight Theme

Chrome Inspector Twilight Theme

This is just my implementation and is probably not 100% what you would expect. The way the Chrome inspector wraps things is different to how code editors do it, so it's not possible to get it identical, but we can get a close approximation.

Includes the Elements, Resources (view js/css/html file), Sources (view js/css/html file), and Console panels; styles for the toolbar (Elements/Resources/Network/etc); and even view source styles (note: not JS/CSS view source though - that's not possible at the moment).

As always, if you see something that you can improve on, please do so and send a pull request :)

DISCLAIMER

Please note: custom themes are unofficial and may potentially break existing DevTools functionality.

As always, if you encounter bugs with the DevTools, please report them, but disable the theme and test again, first. ;)

The 3D

I've added a 3D hover effect to the icons in the tabs. To see an example of the effect, see this codepen I made to demonstrate how it works.

If you don't like the 3d tab icon version, I've created a branch without that effect here.

Screenshots

Normal Elements panel

Dock to right & floating Elements panel

Sources Panel

Installation

This post by Darcy Clarke should help you out.

Known Issues

• If you come across any issues, please let me know by submitting an issue using the link above. Bonus marks for submitting a pull request to fix the issue!

Credits

I based this file off of the mnml Theme by Michael P. Pfeiffer, which itself was based off of the Tomorrow Theme by Ben Truyman.

chrome-twilight's Issues

Selector text is in black in Styles

Support Google Chrome 30.0.1599.101

I am using Google Chrome 30.0.1599.101 on OSX Mountain Lion, and some of the theme works, but lots of it does not, making the console look kind of broken...