Kako Hack & Prilagodite Firefox Developer Tools Tema
Teme so osebna stvar za nas razvijalce, ne gre samo za polepšanje urednikov ali orodij. Gre za to, da naredimo zaslon, na katerega bomo gledali (ne da bi veliko utripali), da bo več ur podaljšan in produktiven. Firefox ima dve temi za razvijalska orodja: temno in svetlo. Oba sta odlična, vendar so možnosti še vedno omejene, ne da bi jih lahko prilagodili.
Zdaj, Firefox uporablja kombinacijo XUL in CSS za svoj uporabniški vmesnik, kar pomeni, da je večino njegovega videza mogoče prilagoditi s samo CSS. Mozilla omogoča uporabnikom, da konfigurirajo videz svojih izdelkov z datoteko CSS, imenovano "userChrome.css". Ti lahko dodajte pravila po meri v to datoteko CSS in se bo odražalo v izdelkih Mozilla.
V tej objavi bomo uporabljali isto datoteko CSS za prilagoditev orodij za razvijalce v Firefoxu.
Najprej moramo najti datoteko CSS ali jo narediti in jo postaviti na pravo mesto. Ena hitra pot do mape, ki bo vsebovala "userChrome.css", je z obiskom about: podpora v brskalniku in s klikom na gumb »Pokaži mapo« ob oznaki »mapa profila«. To bo odprlo trenutno mapo profila Firefoxa.
V mapi profila boste videli mapo z imenom »chrome«. Če ni tam, ga ustvarite in ustvarite "userChrome.css" v njem. Zdaj, ko je nastavitev datoteke končana, premaknimo na kodo.
: root.theme-dark - temno-telesno ozadje: # 050607! pomembno; - temačna stranska ozadje: # 101416! pomembno; - ozadje orodne vrstice-tabulatorja: # 161A1E! pomembno; - temo-orodna vrstica-ozadje: # 282E35! pomembno; - tematski izbor ozadja: # 478DAD! - barva telesa: # D6D6D6! pomembna; - theme-body-color-alt: # D6D6D6! --theme-content-color1: # D6D6D6! -theme-content-color2: # D6D6D6! -theme-content-color3: # D6D6D6! - theme-highlight-green: # 8BF9A6! - theme-highlight-blue: # 00F9FF! - temo-osvetlitev-modro siva: bela! pomembna; - theme-highlight-lightorange: # FF5A2C! - temo-poudarimo-oranžno: rumeno! pomembno; - theme-highlight-red: # FF1247! --theme-highlight-pink: # F02898!
Kar vidite zgoraj, je koda, ki sem jo dodal v datoteko »userChrome.css«, da spremenim videz orodij razvijalcev iz tega
za to:
Želel sem samo izboljšati kontrast nekoliko bolj s temnejšim ozadjem in svetlejšim besedilom v temni temi (tudi nisem dober pri barvnih shemah), zato sem ostal pri nekaterih osnovnih barvah, ki se običajno uporabljajo v temnih temah. Če ste boljši z barvami, poskusite sami z barvami, kot se vam zdi primerno, da najdete boljše ujemanje s temo, ki jo uporabljate.
Koda je samo seznam barvnih spremenljivk CSS, ki se uporabljajo za barvanje različnih delov uporabniškega vmesnika DevTools. Našli smo kodo v datoteki z imenom "variables.css" v stisnjeni datoteki “omni.ja”:
V sistemu Windows se datoteka nahaja na:
F: /firefox/browser/omni.ja. Zamenjaj F: s pogonom, kamor ste namestili Firefox.
V OSX se datoteka nahaja na:
~ / Applications / Firefox.app / Vsebina / Viri / brskalnik / omni.ja.
To so stisnjene datoteke Java. V operacijskem sistemu Windows lahko preimenujete .ja razširitev na .zip in uporabite izvorni pripomoček za ekstrakcijo programa Windows Explorer, da razpakirate datoteke v njem. V OSX, pojdite na Terminal in zaženite unzip omni.ja. Upoštevajte, da pred tem naredite kopijo datoteke v drugem imeniku.
Ko je omni.ja izvzeta, lahko najdete datoteko na /chrome/devtools/skin/variables.css; da, koža Firefox DevTools je pod imenom krom. V variables.css, boste videli veliko barvnih spremenljivk, uporabljenih tako za svetlo kot za temno temo, kot sledi
: root.theme-light - temno-telesno ozadje: #fcfcfc; -theme-sidebar-background: # f7f7f7; - temno-kontrastno ozadje: # e6b064; - ozadje orodne vrstice-tabulatorja: #ebeced; - temo-orodna vrstica-ozadje: # f0f1f2; - ozadje za izbiro teme: # 4c9ed9; - tematska izbira-ozadje-polprosojni: rgba (76, 158, 217, .23); - barva za izbiro teme: # f5f7fa; - barva z razdelilnikom: #aaaaaa; --theme-comment: # 757873; - barva telesa: # 18191a; - temno telo-barva-alt: # 585959; - tematska vsebina-barva1: # 292e33; - tematska vsebina-barva2: # 8fa1b2; - tematska-barva vsebine3: # 667380; - theme-highlight-green: # 2cbb0f; - theme-highlight-blue: # 0088cc; - tematska-osvetljevalna-modra: # 0072ab; - theme-highlight-purple: # 5b5fff; - theme-highlight-lightorange: # d97e00; - theme-highlight-orange: # f13c00; - theme-highlight-red: # ed2655; - theme-highlight-pink: # b82ee5; / * Barve, ki se uporabljajo v grafih, kot so orodja za uspešnost. Podobne barve za časovno premico Chrome. * / - tematski grafi-zeleni: # 85d175; - temo-grafi-modri: # 83b7f6; - tematski grafi-modri: # 0072ab; - tematski grafi-vijolični: # b693eb; - temo-grafi-rumeni: # efc052; - tematski grafi-oranžni: # d97e00; - tematski grafi-rdeči: # e57180; - temo-grafi-siva: #cccccc; - tematski grafi - polno rdeči: # f00; - tematski grafi-modro: # 00f; : root.theme-dark - temno-telesno ozadje: # 14171a; - temačna stranska ozadje: # 181d20; - temno-kontrastno ozadje: # b28025; - ozadje orodne vrstice-tab-tabela: # 252c33; - ozadje orodne vrstice: # 343c45; - ozadje za izbiro teme: # 1d4f73; - tematski izbor-ozadje-polprosojni: rgba (29, 79, 115, .5); - barva za izbiro teme: # f5f7fa; - barva z razdelilnikom: črna; --theme-comment: # 757873; - barva telesa: # 8fa1b2; --theme-body-color-alt: # b6babf; - tematska vsebina-color1: # a9bacb; - tematska vsebina-barva2: # 8fa1b2; - tematska vsebina-barva3: # 5f7387; - temno-zelena: # 70bf53; - theme-highlight-blue: # 46afe3; - theme-highlight-bluegrey: # 5e88b0; - temno-vijolična: # 6b7abb; - theme-highlight-lightorange: # d99b28; - theme-highlight-orange: # d96629; - temno-rdeča: # eb5368; - theme-highlight-pink: # df80ff; / * Barve, uporabljene v grafih, kot so orodja za uspešnost. Večinoma podobne nekaterim barvam "vrhunskih *". * / - tematski grafi-zeleni: # 70bf53; - tematski grafi-modri: # 46afe3; - tematski grafi-modri sivi: # 5e88b0; - tematski grafi-vijolični: # df80ff; - tematski grafi-rumeni: # d99b28; - tematski grafi-oranžni: # d96629; - tematski grafi-rdeči: # eb5368; - tematski grafi sivi: # 757873; - tematski grafi - polno rdeči: # f00; - tematski grafi-modro: # 00f;
Izberite temo in spremenljivke, ki jih želite ciljati, in jih dodajte v svoj "userChrome.css".
Tukaj je še nekaj posnetkov zaslona mojega orodja za razvijalce.
