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

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?

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

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

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.

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.

As noted in @Rob W's answer: https://stackoverflow.com/a/21210882/933951, 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!

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);
})();

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

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

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.