Cómo personalizar el theme del Firefox Developer Tools

Los themes son algo muy personal para nosotros, los desarrolladores. No solamente se trata de que luzca más bonito el editor o la herramienta, se trata de hacer que la pantalla que vamos a estar mirando (sin parpadear mucho) sea lo más soportable para tantas largas horas de trabajo y así, ser mucho más productivos. Firefox cuenta con dos themes para su Developer Tools: dark y light. Ambos son geniales, pero estamos muy limitados sin una manera de poder personalizarlos.

Ahora, Firefox usa una combinación de XUL y CSS para su interfaz de usuario, lo que significa que la mayor parte de su aspecto puede ser personalizado usando sólo CSS. Mozilla nos proporciona una manera para que los usuarios puedan configurar la apariencia de sus productos con un archivo CSS llamado "userChrome.css". Puedes agregar reglas de estilo para ese archivo CSS y se verán reflejadas en los productos de Mozilla.

En este artículo vamos a hacer uso de ese mismo archivo CSS para personalizar el Firefox Developer Tools.

En primer lugar, tenemos que encontrar ese archivo CSS, o crear uno y colocarlo en el lugar correcto. Una manera rápida de encontrar la carpeta que alberga el "userChrome.css" es ir a about:support en el navegador y hacer clic en el botón "Mostrar carpeta" junto al texto "Carpeta de perfil". Esto abrirá la carpeta del perfil actual de Firefox.

En la carpeta de perfil, verás una carpeta llamada "chrome". Si no está ahí, créate una e inserta un "userChrome.css" en ella. Ahora que ya has creado el archivo, vamos a pasar al código.

:root.theme-dark {
  --theme-body-background: #050607 !important;
  --theme-sidebar-background: #101416 !important;
 
  --theme-tab-toolbar-background: #161A1E !important;
  --theme-toolbar-background: #282E35 !important;
  --theme-selection-background: #478DAD !important;
 
  --theme-body-color: #D6D6D6 !important;
  --theme-body-color-alt: #D6D6D6 !important;
  --theme-content-color1: #D6D6D6 !important;
  --theme-content-color2: #D6D6D6 !important;
  --theme-content-color3: #D6D6D6 !important;
 
  --theme-highlight-green: #8BF9A6 !important;
  --theme-highlight-blue: #00F9FF !important;
  --theme-highlight-bluegrey: white !important;
  --theme-highlight-lightorange: #FF5A2C !important;
  --theme-highlight-orange: yellow !important;
  --theme-highlight-red: #FF1247 !important;
  --theme-highlight-pink: #F02898 !important;
}

Lo que ves arriba es el código que he añadido a mi archivo "userChrome.css" para cambiar el aspecto del Firefox Developer Tools:

A esto:

Solo quería aumentar el contraste un poco más con el fondo oscuro, haciendo más brillante el texto y los colores más vivos sobre el theme dark (sí, se que no soy nada bueno combinando colores...), así que me quedé con los colores básicos que se utilizan en los típicos themes oscuros. Si eres mejor que yo combinando colores, experimenta por tu cuenta con los colores que desees para encontrar la mejor opción para el theme que estés usando.

El código es sólo una lista de variables de color de CSS utilizadas​​ para colorear las diferentes partes de la IU de DevTools. Encontramos el código en un archivo llamado "variables.css" en un archivo comprimido llamado "omni.ja":

En Windows, el archivo se encuentra en:

F: /firefox/browser/omni.ja. Reemplaza la F: con la unidad en la que hayas instalado Firefox.

En OS X, el archivo se encuentra en:

~/Applications/Firefox.app/Contents/Resources/browser/omni.ja

Estos son archivos comprimidos de Java. En Windows, puedes cambiar el nombre de la extensión de .ja a .zip y utilizar la aplicación nativa de Windows Explorer para extraer los archivos. En OS X, ve al terminal y ejecuta unzip omni.ja. No estaría de más hacer una copia del archivo en otro directorio antes de realizar esto.

Una vez que omni.ja ha sido extraído, puedes encontrar el archivo en /chrome/devtools/skin/variables.css; realmente, el skin del Firefox DevTools está en una carpeta bajo el nombre de chrome. En el variables.css, verás un montón de variables de color, utilizadas tanto para el theme dark como para el theme light.

:root.theme-light {
  --theme-body-background: #fcfcfc;
  --theme-sidebar-background: #f7f7f7;
  --theme-contrast-background: #e6b064;
 
  --theme-tab-toolbar-background: #ebeced;
  --theme-toolbar-background: #f0f1f2;
  --theme-selection-background: #4c9ed9;
  --theme-selection-background-semitransparent: rgba(76, 158, 217, .23);
  --theme-selection-color: #f5f7fa;
  --theme-splitter-color: #aaaaaa;
  --theme-comment: #757873;
 
  --theme-body-color: #18191a;
  --theme-body-color-alt: #585959;
  --theme-content-color1: #292e33;
  --theme-content-color2: #8fa1b2;
  --theme-content-color3: #667380;
 
  --theme-highlight-green: #2cbb0f;
  --theme-highlight-blue: #0088cc;
  --theme-highlight-bluegrey: #0072ab;
  --theme-highlight-purple: #5b5fff;
  --theme-highlight-lightorange: #d97e00;
  --theme-highlight-orange: #f13c00;
  --theme-highlight-red: #ed2655;
  --theme-highlight-pink: #b82ee5;
 
  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
  --theme-graphs-green: #85d175;
  --theme-graphs-blue: #83b7f6;
  --theme-graphs-bluegrey: #0072ab;
  --theme-graphs-purple: #b693eb;
  --theme-graphs-yellow: #efc052;
  --theme-graphs-orange: #d97e00;
  --theme-graphs-red: #e57180;
  --theme-graphs-grey: #cccccc;
  --theme-graphs-full-red: #f00;
  --theme-graphs-full-blue: #00f;
}
 
:root.theme-dark {
  --theme-body-background: #14171a;
  --theme-sidebar-background: #181d20;
  --theme-contrast-background: #b28025;
 
  --theme-tab-toolbar-background: #252c33;
  --theme-toolbar-background: #343c45;
  --theme-selection-background: #1d4f73;
  --theme-selection-background-semitransparent: rgba(29, 79, 115, .5);
  --theme-selection-color: #f5f7fa;
  --theme-splitter-color: black;
  --theme-comment: #757873;
 
  --theme-body-color: #8fa1b2;
  --theme-body-color-alt: #b6babf;
  --theme-content-color1: #a9bacb;
  --theme-content-color2: #8fa1b2;
  --theme-content-color3: #5f7387;
 
  --theme-highlight-green: #70bf53;
  --theme-highlight-blue: #46afe3;
  --theme-highlight-bluegrey: #5e88b0;
  --theme-highlight-purple: #6b7abb;
  --theme-highlight-lightorange: #d99b28;
  --theme-highlight-orange: #d96629;
  --theme-highlight-red: #eb5368;
  --theme-highlight-pink: #df80ff;
 
  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
  --theme-graphs-green: #70bf53;
  --theme-graphs-blue: #46afe3;
  --theme-graphs-bluegrey: #5e88b0;
  --theme-graphs-purple: #df80ff;
  --theme-graphs-yellow: #d99b28;
  --theme-graphs-orange: #d96629;
  --theme-graphs-red: #eb5368;
  --theme-graphs-grey: #757873;
  --theme-graphs-full-red: #f00;
  --theme-graphs-full-blue: #00f;
}

Escoge el theme y las variables que desees personalizar y agregalos a tu "userChrome.css".

Éstos son algunas imágenes más de mi Firefox Developer Tools.

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP