Cómo hackear y personalizar el tema de las herramientas para desarrolladores de Firefox
Los temas son algo personal para nosotros los desarrolladores, no se trata solo del embellecimiento de editores o herramientas. Se trata de hacer que la pantalla que veremos (sin parpadear mucho) sea más soportable para trabajar durante horas y de manera productiva. Firefox tiene dos temas para herramientas de desarrollador: oscuro y claro. Ambos son geniales, pero las opciones aún son limitadas sin una forma de personalizarlas.
Ahora, Firefox usa una combinación de XUL y CSS para su interfaz de usuario, lo que significa que la mayor parte de su apariencia se puede modificar solo con CSS. Mozilla proporciona una manera para que los usuarios configuren la apariencia de sus productos con un archivo CSS llamado "userChrome.css". Usted puede agrega reglas de estilo personalizadas a ese archivo CSS y se reflejará en los productos de Mozilla..
En esta publicación utilizaremos ese mismo archivo CSS para personalizar las herramientas para desarrolladores en Firefox..
Primero, necesitamos encontrar ese archivo CSS, o hacer uno y colocarlo en el lugar correcto. Una forma rápida de encontrar la carpeta que albergará "userChrome.css" es ir a acerca de: soporte en el navegador y haciendo clic en el botón "Mostrar carpeta" junto a la etiqueta "Carpeta de perfil". Esto abrirá la carpeta de perfil actual de Firefox..
En la carpeta de perfil, verás una carpeta llamada "chrome". Si no está allí, crea uno y crea un "userChrome.css" en él. Ahora que la configuración del archivo está hecha, 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; --tema-luz naranja: amarillo! importante; --theme-highlight-red: # FF1247! important; --theme-highlight-pink: # F02898! important;
Lo que ves arriba es el código que agregué a mi archivo "userChrome.css" para cambiar la apariencia de las herramientas de los desarrolladores desde este
a esto:
Solo quería mejorar el contraste un poco más con un fondo más oscuro y un texto más claro en el tema oscuro (además, no soy bueno en los esquemas de color), así que me quedé con algunos colores básicos que se usan normalmente en los temas oscuros. Si es mejor con los colores, experimente por su cuenta con los colores que considere adecuados para encontrar una combinación mejor para el tema que está usando.
El código es solo una lista de las variables de color CSS utilizadas para colorear las distintas partes de la interfaz de usuario 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. Reemplace la F: con el disco donde has instalado tu Firefox en.
En OSX, el archivo se encuentra en:
~ / Aplicaciones / Firefox.app / Contenidos / Recursos / browser / omni.ja.
Estos son archivos comprimidos de Java. En Windows, puede cambiar el nombre de .ja extensión a .cremallera y use la utilidad de extracción nativa de Windows Explorer para descargar los archivos que contiene. En OSX, vaya a Terminal y ejecute descomprimir omni.ja. Tenga en cuenta hacer una copia del archivo en otro directorio antes de hacerlo.
Una vez que se haya extraído omni.ja, puede encontrar el archivo en /chrome/devtools/skin/variables.css; Sí, el skin de DevTools de Firefox está debajo de una carpeta llamada cromo. En el variables.css, Verá un montón de variables de color utilizadas para los temas claros y oscuros de la siguiente manera
: 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; --tema-comentario: # 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; / * Los colores utilizados en los gráficos, como herramientas de rendimiento. Colores similares a la línea de tiempo de Chrome. * / --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-gray: #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; --tema-divisor-color: negro; --tema-comentario: # 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; / * Los colores utilizados en los gráficos, como herramientas de rendimiento. Sobre todo similar a algunos colores "resaltar- *". * / --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-gray: # 757873; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f;
Elija el tema y las variables que desea orientar y agréguelas a su "userChrome.css".
Aquí hay algunas capturas de pantalla más de la ventana de mis herramientas de desarrollador.
