Custom.css has stopped working in 32.0.1700.76 m Google Chrome update

Question

I use some themes for Google Developer Tools from this website: http://devthemez.com/themes/chrome-developer-tools

However, after the 32.0.1700.76 m update, all themes have stopped working.

What do I need to do to get them working again?

Uranalysis

Answer 1

Support for Custom.css has been removed from Chrome in version 32.
This answer provides two methods for easily activating style sheets in the developer tools. The second method is recommended, but only works for Chrome 33+, the first method also works for Chrome 32.

Both methods are Chrome extensions, to use the examples below, follow the following steps:

1. Create a directory and put the following files in it.
2. Go to chrome://extensions
3. Select "Developer mode"
4. Click on "Load unpacked extension"
5. Select the directory you just created.

True emulation of Custom.css

This section uses one of the two techniques described at How to inject javascript into Chrome DevTools itself. This extension can easily be generalized to fully emulate Custom.css, i.e. activate the style sheet on every page like Custom.css.
Note: If you're using Chrome 33+, then I strongly recommend the method in the next section over this one.

manifest.json

{
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();

Custom.css

/* whatever you had in your Custom.css */

---

Official method (Chrome 33+ only)

If you want to customize your devtools style, chrome.devtools.panels.applyStyleSheet has to be used. This feature is currently hidden behind a flag (--enable-devtools-experiments, requires relaunch of Chrome) and a checkbox (after enabling the flag, open the devtools, click on the gears icon, go to Experiments and check "Allow UI themes").

manifest.json

{
  "name": "<name> DevTools Theme",
  "version": "1",
  "devtools_page": "devtools.html",
  "manifest_version": 2
}

devtools.html

 <script src="devtools.js"></script>

devtools.js

var x = new XMLHttpRequest();
x.open('GET', 'Custom.css');
x.onload = function() {
    chrome.devtools.panels.applyStyleSheet(x.responseText);
};
x.send();

Custom.css

/* whatever you had in your Custom.css */

For more info, see https://code.google.com/p/chromium/issues/detail?id=318566

Scourings

Might as well note that "Allow UI themes" is not available on Chrome 32 (current stable). It is currently available on Canary though. – Bully

@FabrícioMatté Updated answer with a method for Chrome 32. – Scourings

Wow... Chrome is not doing well lately. What if I want a different Custom.css per computer, but I have extensions synced? Damnit Google! – Yasukoyataghan

Yeah they keep doing stuff that is making me consider other browsers. What the hell are they doing?? – Heartstrings

So this is what it’s come to, trying to emulate a feature that was already built-in. Yet another reason to leave Chrome forever. As far as I’m concerned, this is the last straw. It’s advantages over other browsers has been reduced to nothing. I’m out. – Meal

This solution has just stopped working.... It seems that chrome.devtools is undefined now. – Keening

@Ram That is impossible (or a critical bug). Did you follow every step in the answer? In particular, is the script run in a page declared at the devtools_page section of the manifest file? – Scourings

@RobW You're right, this is my mistake. I reinstalled Chrome and forgot to readd the flag. – Keening

I'm on chrome 34 and this just doesn't seem to work after a good 20 minutes of goofing around with settings and uninstalling/reinstalling extensions or restarting the browser with flags, going to the flags page, trying multiple extensions, etc... – Chimp

@Chimp Both methods still work for me in 34.0.1847.132. Make sure that you literally follow EVERY step. – Scourings

So, for the second method, you need to publish your extension to the webstore? And pay the $5 of the developer fee? – Parthenia

@GeorgeKatsanos You can just load the extension in developer mode as an unpacked extension (though if you're on Chrome Stable/dev for Windows, you'll get a bubble about the unpacked extension whenever on startup of Chrome (see chromium.org/developers/extensions-deployment-faq). Since this limitation sucks for developers, I might upload an extension to the CWS to manage devtools themes. Contact me (or follow me on Github - the extension will be open-source) if you want to know when I've done this task. – Scourings

I'm using Chrome version 55.0.2883.44 beta (64-bit), and I can attest that Rob W's. second method ("Official method (Chrome 33+ only)") WORKS! I am so thrilled to finally fatten that skinny, ungrabbable scrollbar! Now if I can just figure out a way to add text labels under the extension icons … – Fervency

I can's find chrome.devtools.panels.applyStyleSheet on developer.chrome.com/extensions/devtools_panels, is it removed? – Ninanincompoop

@Ninanincompoop It's still there, just not documented. To use it, you need to enable experiments (devtools settings > Experiments > "Allow custom UI themes"). Source code of Chromium is here: chromium.googlesource.com/devtools/devtools-frontend/+/… – Scourings

Thanks Rob. This is what I actually want to do: https://mcmap.net/q/339969/-is-there-a-way-to-hide-the-top-menus-in-chrome-devtools/2142577. Do you think it's feasible? – Ninanincompoop

@Ninanincompoop See https://mcmap.net/q/339969/-is-there-a-way-to-hide-the-top-menus-in-chrome-devtools – Scourings

Answer 2

There is now developer themes in Chrome Store for 33+

Open chrome://flags and Enable Developer Tools experiments. Open developer tools settings, select Experiments tab, and check Allow Custom UI Themes. Install any theme, you can search for “devtools theme” on the Chrome Web Store. It’ll also keep you up to date.

ref

Crucifix

"Developer tools settings" is accessed by clicking the gear icon in the upper-right corner of the Developer Tools window. – Fante

Answer 3

I couldn't really understand everything from Rob W but for me

manifest.json

{
  "name": "__something__",
  "version": "1",
  "content_scripts": [
    {
      "matches": ["__link_filter__"],
      "css": ["__filename__.css"]
    }
  ],
  "manifest_version": 2
}

and css file in same folder did what I wanted. How to load this folder is already answered here.

Demetra

Answer 4

In my case, I don't care so much about theming devtools as overriding CSS on certain sites (a la greasemonkey). According to the Man Himself (Paul Irish) the recommended replacement (for that use case at least) is a Chrome extension called Control Freak. I tried it out and it works great for one-off JS/CSS overrides per site. Not sure about theming per se, but it should help people just looking to replace the basic Custom.css functionality as I was.

Nakesha

Does this work with pages you've marked as apps (ie add shortcut to homescreen, then set to open as window)? – Limousin

@airtonix, wouldn't it be easier to try yourself and let us others know? :) – Vibratory

Answer 5

As noted in @Rob W's answer: https://mcmap.net/q/335930/-custom-css-has-stopped-working-in-32-0-1700-76-m-google-chrome-update, the official recommended method of skinning the Google Chrome Developer tools is by creating an extension to override the default styles which are applied, using the chrome.devtools.panels.applyStyleSheet.

The process of creating a Chrome extension for this purpose can be a bit tedious to skin each component by hand from scratch, so I've created a small plugin which provides a collection of built-in themes and additional editor settings for Chrome Developer Tools. The extensions also provides developers the ability to create additional custom themes using a simple Sass templating system without writing your own extension.

1. Install DevTools Author Chrome extension from Chrome Web Store
2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Restart Chrome for flags to take effect.
3. Open DevTools (cmd + opt + I); Settings > Experiments > check Allow custom UI themes.

This will provide, out of the box the following features:

• The ability to choose from +25 custom editor themes
• Custom font support via enabled system fonts
• Incremental control of font size, from 10px - 22px

If you would like to contribute additional themes, you can follow the below steps:

Fork the GitHub repository and then follow the steps below. The Devtools Author Chrome extension is built using NodeJS and GruntJS.

Installation:

$ git clone [email protected]:<username>/devtools-author.git
$ cd devtools-author
$ npm install

Development:

$ grunt serve

1. Once grunt is running, to install development extension in Chrome, open Settings > More Tools > Extensions and click on the Load unpacked extension... button. (also enable Allow incognito below if you wish).
   • (Disable DevTools Author if you have the extension installed from the Chrome Web Store.)
   • Make sure Developer Tools experiments are enabled and custom UI themes are allowed.
2. Restart DevTools. I find the fastest way to see changes take affect is to undock DevTools in a separate window and then open a subsequent DevTools window (cmd + opt + I while the current DevTools window is focused) after changes have been saved and grunt reloads the assets. You'll then need to reload (close and reopen) the subsequent DevTools window after you make changes.

Creating additional themes

1. Make a copy of one of the templates from app/styles/themes/templates/ and rename the file to your theme name without the underscore, ie. if your theme is called aloha, inside of app/styles/themes/, copy templates/_theme-template.scss and rename it to aloha.scss
2. Add color values for the palette based on the code syntax highlighter variables in your scss file.
   • If you desire more specific targeting for your theme than what is being supported out of the box, you can add those styles to the end of your theme file, after the @include styles().
3. Add your color palette object (name and colors array) to the themes.json in app/scripts/
4. In DevTools, select your theme palette in the Author Settings panel.
5. Preview and adjust your colors as needed. See Development - Step 2.
6. Commit and push your changes to your repo, then create a pull request for your new theme once it is ready!

Lamelli

Answer 6

I used the instructions for Chrome 32, but it didn't work. My goal was to invert the colors of developer tools. I created a directory and placed three files in it, Custom.css, Manifest.json, run_as_devtools.js.

Custon.css

#-webkit-web-inspector {
-webkit-filter: invert(1);
font-weight: bold !important;
}

manifest.json

{
   "content_scripts": [{
      "js": [ "run_as_devtools.js" ],
      "matches": [ "<all_urls>" ]
   }], 
   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC4r/pUHVPYQTn7vu3YHT52I0SKM15OBOTi0Jii4q5Koxd3Gdc/WXdqC2YgMA25J5PRiSubu/nHFf12Ubp3OZyNqB3j45ZscQ+tH1bwcV+cqdvv/Ik6VQaS6/qLmenLdFPKOCg/g1L1iKZu6Jjny6GlovpBj+7gjWQZBIoGBd70HQIDAQAB",
   "manifest_version": 2,
   "name": "Emulate Custom.css",
   "version": "1.0",
   "web_accessible_resources": [ "Custom.css" ]
}

run_as_devtools.js

if (location.protocol === 'chrome-devtools:') (function() {
    'use strict';
    var l = document.createElement('link');
    l.rel = 'stylesheet';
    l.href = chrome.runtime.getURL('Custom.css');
    document.head.appendChild(l);
})();

Gladine

Answer 7

Developer mauricecruz has made a nice tool for making custom Chrome DevTools themes.

https://github.com/mauricecruz/zero-base-themes

It's a lot easier than writing a CSS file (in my opinion).

Eicher

Answer 8

1. open up devtools ⌘+Option/Alt+i / Ctrl+Shift+i
2. open up Run command ⌘+Shift+p / Ctrl+Shift+p (make sure to click on the devtools before doing this keyboard shortcut)
3. search for dark and you will see an option to switch to dark theme

You can also follow the directions here

Agamete

Answer 9

I couldn't find a simple solution for this without saving a bunch of custom files to my pc so I did a thing and decided to create a chrome extension that allows writing and saving custom css for sites and syncing across your chrome browsers.

It's my first time writing a chrome extension but here's the source code: https://github.com/Eltee-Taiwo/ChromePageStyler

It's currently in review to get on the Chrome Store if you want to wait till then.

Sindhi