Ahora hay temas para desarrolladores en Chrome Store para 33 +

Abra chrome://flags y Habilite los experimentos de Herramientas para desarrolladores. Abra la configuración de herramientas de desarrollador, seleccione la pestaña Experimentos y marque Permitir temas de interfaz de usuario personalizados. Instala cualquier tema, puedes buscar " devtools theme" en Chrome Web Store. También te mantendrá al día.

Ref

En mi caso, no me importa tanto tematizar devtools como sobreescribir CSS en ciertos sitios (a la greasemonkey). De acuerdo con el Hombre Mismo (Paul Irish) el reemplazo recomendado (para ese caso de uso al menos) es una extensión de Chrome llamada Control Freak. Lo probé y funciona muy bien para anulaciones JS/CSS únicas por sitio. No estoy seguro sobre la tematización per se, pero debería ayudar a las personas que solo buscan reemplazar la funcionalidad básica Custom.css como lo estaba.

Realmente no podía entender todo de Rob W, pero para mí

Manifiesto.json

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

Y el archivo css en la misma carpeta hicieron lo que quería. Cómo cargar esta carpeta ya se responde aquí.

Como se indica en la respuesta de @Rob W: https://stackoverflow.com/a/21210882/933951, el método oficial recomendado de skinning de las herramientas para desarrolladores de Google Chrome es mediante la creación de una extensión para anular los estilos predeterminados que se aplican, utilizando el chrome.devtools.panels.applyStyleSheet.

El proceso de creación de una extensión de Chrome para este propósito puede ser un poco tedioso para la piel de cada componente a mano desde cero, por lo que he creado un pequeño plugin que proporciona una colección de temas incorporados y adicionales configuración del editor para Herramientas de desarrollo de Chrome. Las extensiones también proporcionan a los desarrolladores la capacidad de crear temas personalizados adicionales utilizando un simple sistema de plantillas Sass sin escribir su propia extensión.

1. Instalar DevTools Autor Chrome extension desde Chrome Web Store
2. Enable Developer Tools experiments in chrome://flags/#enable-devtools-experiments. Reiniciar Chrome para banderas para hacer efecto.
3. Open DevTools (cmd + opt + I); Ajustes > Experimentos > comprobar Permitir temas de interfaz de usuario personalizados.

Esto proporcionará, fuera de la caja, las siguientes características:

• La posibilidad de elegir entre + 25 temas de editor personalizados
• Soporte de fuentes personalizadas a través de fuentes del sistema habilitadas
• Control incremental del tamaño de fuente, de 10px-22px

Si desea contribuir con temas adicionales, puede seguir los siguientes pasos:

Bifurca el repositorio GitHub y luego siga los pasos a continuación. La extensión Devtools Author Chrome se construye usando NodeJS y GruntJS .

Instalación:

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

Desarrollo:

$ grunt serve

1. Una vez que grunt se esté ejecutando, para instalar la extensión de desarrollo en Chrome, abra Settings > More Tools > Extensions y haga clic en Load unpacked extension... botón. (también habilite Allow incognito a continuación si lo desea).
   • (Desactivar DevTools Autor si tiene la extensión instalada desde Chrome Web Store.)
   • Asegúrese de que los experimentos de Herramientas para desarrolladores estén habilitados y que los temas de interfaz de usuario personalizados estén permitidos.
2. Reinicie DevTools. Creo que la forma más rápida de ver que los cambios afectan es desacoplar DevTools en una ventana separada y luego abrir una ventana DevTools posterior (cmd + opt + I mientras la ventana DevTools actual está enfocada) después de que los cambios se hayan guardado y grunt vuelva a cargar los activos. A continuación, tendrá que volver a cargar (cerrar y volver a abrir) la ventana DevTools posterior después de realizar cambios.

1. Haga una copia de una de las plantillas de app/styles/themes/templates/y cambie el nombre del archivo a su nombre de tema sin el subrayado, es decir. si tu tema se llama aloha , dentro de app/styles/themes/, copia templates/_theme-template.scss y cámbialo a aloha.scss
2. Agregue valores de color para la paleta basados en las variables del resaltador de sintaxis de código en su archivo scss.
   • Si desea una segmentación más específica para su tema de lo que se está soportando fuera de la caja, puede agregar esos estilos al final de su archivo de tema, después de la @include styles().
3. Agregue su objeto de paleta de colores (nombre y matriz de colores) a themes.json en app/scripts/
4. En DevTools, seleccione su paleta de temas en el panel Configuración de autor.
5. Previsualice y ajuste sus colores según sea necesario. Véase Desarrollo - Paso 2.
6. Confirma y envía tus cambios a tu repositorio, luego crea un pull solicite para su nuevo tema una vez que esté listo!

Usé las instrucciones para Chrome 32, pero no funcionó. Mi objetivo era invertir los colores de las herramientas para desarrolladores. Creé un directorio y coloqué tres archivos en él, Personalizados.css, Manifiesto.json, run_as_devtools.js.

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

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

Desarrollador mauricecruz ha hecho una buena herramienta para hacer temas personalizados de Chrome DevTools.

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

Es mucho más fácil que escribir un archivo CSS (en mi opinión).