Så här hackar och anpassar du Firefox-utvecklarverktyget
Teman är en personlig sak för våra utvecklare, det handlar inte bara om försköning av redaktörer eller verktyg. Det handlar om att göra skärmen som vi ska stirra på (utan att blinka mycket) mer tålamod att arbeta på i timmar i slutändan och på ett produktivt sätt. Firefox har två teman för utvecklarverktyg: mörkt och lätt. Båda är stora, men alternativen är fortfarande begränsade utan ett sätt att anpassa dem.
Nu använder Firefox en kombination av XUL och CSS för dess användargränssnitt, vilket innebär att det mesta av sitt utseende kan tweaked med bara CSS. Mozilla ger användarna möjlighet att konfigurera sina produkters utseende med en CSS-fil som heter "userChrome.css". Du kan Lägg till anpassade stilregler till den CSS-filen och det kommer att återspeglas på Mozilla-produkterna.
I det här inlägget kommer vi att använda samma CSS-fil för att anpassa utvecklingsverktygen i Firefox.
Först måste vi hitta den CSS-filen, eller skapa en och placera den på rätt plats. Ett snabbt sätt att hitta mappen som kommer att hyra "userChrome.css" är att gå till om: support i webbläsaren och klicka på knappen "Visa mapp" bredvid etiketten "Profilmapp". Detta öppnar Firefox aktuella profilmapp.
I profilmappen ser du en mapp med namnet "Chrome". Om det inte finns, skapa en och skapa en "userChrome.css" i den. Nu när inställningen av filen är klar, låt oss flytta till kod.
: root.theme-dark --theme-body-background: # 050607! viktigt; --Tem-sidebar-bakgrund: # 101416! viktigt; --Tema-flik-verktygsfält-bakgrund: # 161A1E! viktigt; --Tema-verktygsfält-bakgrund: # 282E35! viktigt; --Tem-urval-bakgrund: # 478DAD! viktigt; --Tom-kroppsfärg: # D6D6D6! viktigt; --theme-body-color-alt: # D6D6D6! viktigt; --Teminnehåll-färg1: # D6D6D6! Viktigt; --Teminnehåll-färg2: # D6D6D6! viktigt; --Teminnehåll-färg3: # D6D6D6! viktigt; - Them-highlight-green: # 8BF9A6! viktigt; --Tema-Höjdpunkt-Blått: # 00F9FF! viktigt; - Them-highlight-bluegrey: vit! viktigt; - Them-highlight-lightorange: # FF5A2C! viktigt; - Them-highlight-orange: gul! viktigt; - Them-highlight-red: # FF1247! viktigt; - Them-highlight-pink: # F02898! viktigt;
Vad du ser ovan är koden som jag lade till i min "userChrome.css" -fil för att ändra utseendet på utvecklarverktyg från detta
till detta:
Jag ville bara förbättra kontrasten lite mer med mörkare bakgrund och ljusare text i det mörka temat (jag är inte bra på färgscheman), så jag stannade med några grundläggande färger som vanligtvis används i mörka teman. Om du är bättre med färger, prova själv med färgerna som du tycker är lämplig för att hitta en bättre matchning för det tema du använder.
Koden är bara en lista över CSS-färgvariabler som används för att färga olika UI-delar av DevTools. Vi hittade koden i en fil som heter "variables.css" i en komprimerad fil med namnet “omni.ja”:
I Windows finns filen på:
F: /firefox/browser/omni.ja. Ersätt F: med enheten där du har installerat din Firefox i.
I OSX finns filen på:
~ / Applications / Firefox.app / Innehåll / Resources / webbläsare / omni.ja.
Dessa är komprimerade Java-filer. I Windows kan du byta namn på .ja förlängning till .blixtlås och använd det inbyggda verktyget Windows Explorer för att lossa filerna i den. I OSX, gå till Terminal och kör Unzip omni.ja. Tänk på att göra en kopia av filen i en annan katalog innan du gör det.
När omni.ja har extraherats, kan du hitta filen på /chrome/devtools/skin/variables.css; ja, Firefox DevTools hud är under en mapp som heter krom. I variables.css, Du får se en massa färgvariabler som används för både ljus och mörka teman enligt följande
: root.theme-light --theme-body-background: #fcfcfc; --Tem-sidebar-bakgrund: # f7f7f7; --Tem-kontrast-bakgrund: # e6b064; --theme-flik-verktygsfält-bakgrund: #ebeced; --Tema-verktygsfält-bakgrund: # f0f1f2; --Tema-Urval-bakgrund: # 4c9ed9; -tem-urval-bakgrunds-semitransparent: rgba (76, 158, 217, .23); --Tem-urval -färg: # f5f7fa; --Tem-splitter-färg: #aaaaaa; --Tem-kommentar: # 757873; --Tom-kroppsfärg: # 18191a; -tom-kropp-färg-alt: # 585959; --Teminnehåll-färg1: # 292e33; --Teminnehåll-färg2: # 8fa1b2; - innehåll-innehåll-färg3: # 667380; - Them-highlight-green: # 2cbb0f; - tema-markera-blå: # 0088cc; - Them-highlight-bluegrey: # 0072ab; --them-highlight-lila: # 5b5fff; - Them-highlight-lightorange: # d97e00; - tema-markera-orange: # f13c00; --Tema-Höjdpunkt-Rött: # ed2655; - tema-markera-rosa: # b82ee5; / * Färger som används i Grafer, som prestationsverktyg. Liknande färger på Chrome: s tidslinje. * / --Tem-grafer-grön: # 85d175; -tom-grafer-blå: # 83b7f6; --Tem-grafer-bluegrey: # 0072ab; -tom-grafer-lila: # b693eb; --Tem-grafer-gul: # efc052; --Tem-grafer-orange: # d97e00; --Tem-grafer-rött: # e57180; - -diagram-grå: #cccccc; --Tem-grafer-fullröd: # f00; --Tem-Grafer-Blått: # 00f; : root.theme-dark --theme-body-background: # 14171a; --Tem-sidebar-bakgrund: # 181d20; --Tem-kontrast-bakgrund: # b28025; --Tema-flik-verktygsfält-bakgrund: # 252c33; --Tema-verktygsfält-bakgrund: # 343c45; --Tema-Urval-bakgrund: # 1d4f73; -tem-urval-bakgrunds-semitransparent: rgba (29, 79, 115, .5); --Tem-urval -färg: # f5f7fa; --Tem-splitter-färg: svart; --Tem-kommentar: # 757873; --Tem-kroppsfärg: # 8fa1b2; --theme-body-color-alt: # b6babf; --Teminnehåll-färg1: # a9bacb; --Teminnehåll-färg2: # 8fa1b2; - innehållsinnehåll-färg3: # 5f7387; - tema-markeringsgrön: # 70bf53; - Them-highlight-blue: # 46afe3; - Them-highlight-bluegrey: # 5e88b0; - Them-highlight-lila: # 6b7abb; - Them-highlight-lightorange: # d99b28; - tema-markera-orange: # d96629; --Tem-Höjdpunkt-Rött: # eb5368; --Tema-Höjdpunkt-Rosa: # df80ff; / * Färger som används i Grafer, som prestationsverktyg. Mestadels liknar vissa "highlight-*" färger. * / - -diagram-grön: # 70bf53; --Tem-Grafer-Blå: # 46afe3; --Tem-grafer-bluegrey: # 5e88b0; -tom-grafer-lila: # df80ff; --Tem-grafer-gul: # d99b28; --Tem-grafer-orange: # d96629; --Tem-grafer-rött: # eb5368; - -diagram-grå: # 757873; --Tem-grafer-fullröd: # f00; --Tem-Grafer-Blått: # 00f;
Välj det tema och de variabler du vill rikta in och lägg till dem på din "userChrome.css".
Här är några fler skärmdumpar av mitt utvecklarverktygs fönster.
