frontdevde / mnml-devtools-theme Goto Github PK

A not so minimal theme for the Chrome Developer Tools.

CSS 98.47% CoffeeScript 1.53%

mnml-devtools-theme's Introduction

NOTE: Development on and support for this theme has stopped. If you'd like to continue using/updating it feel free to fork the repository!

mnml Theme

A not so minimal theme for the Chrome Developer Tools.

Caution: Frequent use of !important as it sadly is necessary to override the Dev Tools styles.

Tested on Mac.

Installation

Just locate the User Stylesheets directory and override the Custom.css:

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

PC: C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets/Custom.css

Customization

Feel free to fork and customize the theme to your needs. Missing some selectors? Just navigate Chrome to chrome-devtools://devtools/devTools.css and get a detailed list of nearly all possible selectors and their default styles.

Easier customization via Grunt task (Mac)

To install grunt and dependencies

# sudo npm install -g grunt-cli
# npm install

Then to watch, compile and copy the files use

# grunt watch:mac

Theme preview

mnml-devtools-theme's People

Contributors

Stargazers

Watchers

mnml-devtools-theme's Issues

Background of Right Panel is white (but text is for dark theme)

Just copied RAW content of custom.css file to the right place and what i get is everything looks cool except right panel (where the Computed Style, Styles, Metrics etc tabs are). There are white background not like on your screenshots (https://dl.dropboxusercontent.com/u/6377483/dt_theme_issue.png). Please check, maybe there are some updates needed to your theme.

Or please explain me the way to Inspect the layout of Developer Tools and to find css rules for this panel in Custom.css

Focus color in Ressources Tab tables

Change the focus color in Ressources Tab, or the change the text color in a focused field, so that you can see what you type

no color change on pause exceptions under sources tab

there is no style change to pause button for breaking script

CSS Selector - missing color

Just copied the raw CSS straight to my Custom.css -- everything looked fine except the CSS selectors. Finally figured out how to inspect the Inspector on Windows with CTRL+SHIFT+I (recommend adding that to .md instructions) and discovered a slightly different selector to target it:
#-webkit-web-inspector .styles-section .selector-matches

Chrome version 23.0.1271.40 beta-m

Adding at Line 347 seems to fix it:
`

-webkit-web-inspector .webkit-css-selector,

-webkit-web-inspector .styles-section .selector-matches, /* added @zaus */

-webkit-web-inspector .styles-selector {

color: #bbde57 !important;
}
`

toolbar color

Hello, Michael! I'm using KUbuntu and I have some problem with color of toolbar. When i used native theme of Chrome (or Chromium) and web inspector is docked in main window, the CSS property

#-webkit-web-inspector.compact #toolbar {
  background: -webkit-linear-gradient(#555555, #333333) !important;
  ...
}

works fine. But when I separate inspector the color of toolbar is changing to the native theme color. Can you suggest me how to debug and catch that?

Brighten up selection color

When i select stuff, i can hardly see what i select because the selection color is too close to the background color. I suggest changing it to something a little brighter.

Line 10 current:
background: #888;

Line 10 new:
background: #ccc;

Elements Sidebar no longer themed

The Elements sidebar is no longer themed. See here: http://cl.ly/R1HR

Must have been caused by a Chrome update.

When out of focus in Web Inspector line-height property resets

When you focus on web inspector, the line-height set to 16px but when you go out of focus it loses the property to the default one making the screen glitch a little.

I would add the following code after line 472 in Custom.css

#-webkit-web-inspector .outline-disclosure ol li {
  line-height: 16px;
}
#-webkit-web-inspector .outline-disclosure ol li.selected {
  line-height: 16px;
}

installation on Mac

hi,
i installed on win but on mac i don't have a path like
~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css