Sådan Hack & Tilpas dit Firefox Udvikler Tools Tema
Temaer er en personlig ting for os udviklere, det handler ikke kun om forskønning af redaktører eller værktøjer. Det handler om at lave skærmen, som vi vil stirre på (uden at blinke meget) mere tåleligt at arbejde på i flere timer på en produktiv måde. Firefox har to temaer til udviklerværktøjer: mørkt og let. Begge er gode, men mulighederne er stadig begrænset uden en måde at personliggøre dem på.
Nu bruger Firefox en kombination af XUL og CSS til dets brugerflade, hvilket betyder, at det meste af dets udseende kan tweaked ved hjælp af bare CSS. Mozilla giver brugeren mulighed for at konfigurere sine produkters udseende med en CSS-fil kaldet "userChrome.css". Du kan Tilføj tilpassede stilregler til den CSS-fil og det vil blive afspejlet på Mozilla-produkterne.
I dette indlæg vil vi gøre brug af den samme CSS-fil for at tilpasse udviklerens værktøjer i Firefox.
For det første skal vi finde den CSS-fil, eller lave en og sætte den på det rigtige sted. En hurtig måde at finde den mappe, der huser "userChrome.css", er at gå til om: støtte i browseren og klikke på knappen "Vis mappe" ved siden af etiketten "Profilmappe". Dette åbner Firefoxs nuværende profilmappe.
I profilmappen ses en mappe med navnet "chrome". Hvis det ikke er der, skal du oprette en og oprette en "userChrome.css" i den. Nu hvor filens opsætning er færdig, lad os flytte til kode.
: root.theme-dark --theme-body-background: # 050607! vigtigt; --Tema-sidebar-baggrund: # 101416! vigtigt; -tema-faneblad-værktøjslinje-baggrund: # 161A1E! vigtigt; --tema-værktøjslinje-baggrund: # 282E35! vigtigt; - tema-valg-baggrund: # 478DAD! vigtigt; -tema-kropsfarve: # D6D6D6! vigtigt; -tema-body-color-alt: # D6D6D6! vigtigt; - tema-indhold-farve1: # D6D6D6! vigtigt; -tem-indhold-farve2: # D6D6D6! vigtigt; - tema-indhold-farve3: # D6D6D6! vigtigt; - tema-højdepunkt-grønt: # 8BF9A6! vigtigt; - tema-højdepunkt-blå: # 00F9FF! vigtigt; - Them-highlight-bluegrey: hvidt! vigtigt; - tema-højdepunkt-lightorange: # FF5A2C! vigtigt; - tema-højdepunkt-orange: gul! vigtigt; -tema-højdepunkt-rødt: # FF1247! vigtigt; - Themes-highlight-pink: # F02898! vigtigt;
Hvad du ser ovenfor er den kode, jeg tilføjede til min "userChrome.css" -fil for at ændre udseendet af udviklerværktøjer fra dette
Til dette:
Jeg ønskede kun at forbedre kontrasten lidt mere med mørkere baggrund og lysere tekst i det mørke tema (også jeg er ikke god til farveskemaer), så jeg forblev med nogle grundlæggende farver, der typisk bruges i mørke temaer. Hvis du er bedre med farver, skal du selv eksperimentere med farverne, som du finder egnet til at finde en bedre match for det tema, du bruger.
Koden er blot en liste over CSS-farvevariabler, der bruges til at farve de forskellige UI-dele af DevTools. Vi fandt koden i en fil kaldet "variables.css" i en komprimeret fil med navnet “omni.ja”:
I Windows er filen placeret på:
F: /firefox/browser/omni.ja. Udskift F: med drevet, hvor du har installeret din Firefox i.
I OSX er filen placeret på:
~ / Programmer / Firefox.app / Indhold / Ressourcer / browser / omni.ja.
Disse er komprimerede Java-filer. I Windows kan du omdøbe .ja udvidelse til .zip og brug det indbyggede Windows Explorer-ekstraktværktøj til at aflæse filerne i den. I OSX skal du gå til Terminal og køre pak ud omni.ja. Husk at lave en kopi af filen i en anden mappe, inden du gør det.
Når omni.ja er blevet ekstraheret, kan du finde filen på /chrome/devtools/skin/variables.css; ja, Firefox DevTools hud er under en navngivne mappe krom. I variables.css, Du kan se en flok farvevariabler, der bruges til både lys og mørke temaer som følger
: root.theme-light --theme-body-background: #fcfcfc; --Tema-sidebar-baggrund: # f7f7f7; -tema-kontrast-baggrund: # e6b064; -tema-faneblad-værktøjslinje-baggrund: #ebeced; --tema-værktøjslinje-baggrund: # f0f1f2; - tema-valg-baggrund: # 4c9ed9; - temmevalg-baggrunds-semitransparent: rgba (76, 158, 217, .23); -tema-valg-farve: # f5f7fa; -tema-splitter-farve: #aaaaaa; -tema-kommentar: # 757873; - kropsfarve: # 18191a; -tema-body-color-alt: # 585959; - tema-indhold-farve1: # 292e33; - tema-indhold-farve2: # 8fa1b2; - tema-indhold-farve3: # 667380; - tema-højdepunkt-grøn: # 2cbb0f; - tema-højdepunkt-blå: # 0088cc; - tema-højdepunkt-bluegrey: # 0072ab; - tema-højdepunkt-lilla: # 5b5fff; - Themes-highlight-lightorange: # d97e00; - tema-højdepunkt-orange: # f13c00; -tema-højdepunkt-rødt: # ed2655; - tema-fremhævning-pink: # b82ee5; / * Farver anvendt i Grafer, som præstationsværktøjer. Lignende farver på Chromes tidslinje. * / --tema-grafer-grønt: # 85d175; -tema-grafer-blå: # 83b7f6; -tema-grafer-bluegrey: # 0072ab; -tema-grafer-lilla: # b693eb; -tema-grafer-gul: # efc052; -tema-grafer-orange: # d97e00; --tema-grafer-rødt: # e57180; -tema-grafer-grå: #cccccc; --tema-grafer-fuldrødt: # f00; -tema-grafer-fuldblå: # 00f; : root.theme-dark --theme-body-background: # 14171a; --Tema-sidebar-baggrund: # 181d20; - tema-kontrast-baggrund: # b28025; -tema-faneblad-værktøjslinje-baggrund: # 252c33; --tema-værktøjslinje-baggrund: # 343c45; - tema-valg-baggrund: # 1d4f73; - tema-valg-baggrunds-semitransparent: rgba (29, 79, 115, .5); -tema-valg-farve: # f5f7fa; --Tem-splitter-farve: sort; -tema-kommentar: # 757873; -tema-kropsfarve: # 8fa1b2; --tema-body-color-alt: # b6babf; - tema-indhold-farve1: # a9bacb; - tema-indhold-farve2: # 8fa1b2; - tema-indhold-farve3: # 5f7387; - tema-højdepunkt-grønt: # 70bf53; - tema-højdepunkt-blå: # 46afe3; - Theme-highlight-bluegrey: # 5e88b0; - tema-højdepunkt-lilla: # 6b7abb; - tema-højdepunkt-lightorange: # d99b28; - tema-højdepunkt-orange: # d96629; -tema-højdepunkt-rødt: # eb5368; - tema-fremhævning-pink: # df80ff; / * Farver anvendt i Grafer, som præstationsværktøjer. Mest set ligner nogle "fremhæve-*" farver. * / --tema-grafer-grønt: # 70bf53; -tema-grafer-blå: # 46afe3; -tema-grafer-bluegrey: # 5e88b0; -tema-grafer-lilla: # df80ff; -tema-grafer-gult: # d99b28; -tema-grafer-orange: # d96629; --tema-grafer-rødt: # eb5368; -tema-grafer-grå: # 757873; --tema-grafer-fuldrødt: # f00; -tema-grafer-fuldblå: # 00f;
Vælg det tema og de variabler, du vil målrette mod, og tilføj dem til din "userChrome.css".
Her er nogle flere skærmbilleder af mit udviklerværktøjs vindue.
