Kuidas Firefoxi arendaja tööriistade teema häkkida ja isikupärastada
Teemad on meie arendajatele isiklik asi, see ei tähenda ainult toimetajate või tööriistade kaunistamist. See on umbes ekraani tegemine, et me vaatame (ilma vilkumata) rohkem talutavaks töötamiseks tundide kaupa ja produktiivselt. Firefoxil on arendaja tööriistade jaoks kaks teemat: tume ja kerge. Mõlemad on suured, kuid võimalused on endiselt piiratud ilma isikupärastamise viisita.
Nüüd kasutab Firefox oma kasutajaliidese jaoks XUL-i ja CSS-i kombinatsiooni, mis tähendab, et suuremat osa selle välimusest saab lihtsalt CSS-i abil muuta. Mozilla pakub kasutajatele võimalust oma toodete välimust konfigureerida CSS-failiga nimega "userChrome.css". Sa saad lisage sellele CSS-failile kohandatud stiili reeglid ja see kajastub Mozilla toodetes.
Selles postituses kasutame Firefoxi arendaja tööriistade isikupärastamiseks sama CSS-faili.
Esiteks peame leidma selle CSS-faili või tegema ühe ja panema selle õigesse kohta. Üks kiire viis leida "userChrome.css" sisaldav kaust on minna umbes: toetus brauseris ja klõpsates "Näita kausta" nuppu silt "Profiili kaust". See avab Firefoxi praeguse profiili kausta.
Profiili kaustas näete kausta nimega "kroom". Kui see ei ole olemas, looge see ja looge "userChrome.css". Nüüd, kui faili loomine on lõpetatud, liigume koodi peale.
: root.theme-dark --theme-body-background: # 050607! --theme-sidebar-background: # 101416! --theme-tab-toolbar-background: # 161A1E! oluline; --theme-toolbar-background: # 282E35! - teema-valik-taust: # 478DAD! --ema-keha-värv: # D6D6D6! --theme-body-color-alt: # D6D6D6! --theme-content-color1: # D6D6D6! --theme-content-color2: # D6D6D6! --theme-content-color3: # D6D6D6! - peamine-esile-roheline: # 8BF9A6! --theme-highlight-blue: # 00F9FF! oluline; - peamine-esile-bluegrey: valge! - peamine-esiletõstev heledus: # FF5A2C! - teema-esiletõstmine-oranž: kollane! --theme-highlight-red: # FF1247! --theme-highlight-pink: # F02898!
Ülaltoodud on kood, mille lisasin failile "userChrome.css", et muuta arendajate tööriistade välimust sellest
sellele:
Ma tahtsin vaid kontrastsust veidi tumedama taustaga ja tumedama teema heledama tekstiga parandada (ka ma ei ole värvilahendustes hea), nii et ma jäin mõnedele põhivärvidele, mida tavaliselt kasutatakse tumedates teemades. Kui olete värvidega parem, proovige ise värve kasutades, nagu näete sobivalt, et leida parem vastavus kasutatava teema jaoks.
Kood on vaid nimekiri CSS-i värvimuutujatest, mida kasutatakse DevToolsi erinevate UI osade värvimiseks. Leidsime koodi failis nimega "variables.css" tihendatud failis “omni.ja”:
Windowsis asub fail aadressil:
F: /firefox/browser/omni.ja. Asenda F: selle draiviga, kuhu olete Firefoxi installinud.
OSXis asub fail aadressil:
~ / Rakendused / Firefox.app / Sisukord / Ressursid / brauser / omni.ja.
Need on tihendatud Java-failid. Windowsis saate selle nime ümber nimetada .ja laiendamine .tõmblukk failide mahalaadimiseks kasutage natiivset Windows Exploreri ekstraktiutiliiti. Avage OSX-is Terminal ja käivitage unzip omni.ja. Pidage meeles, et tehke enne selle tegemist failist koopia.
Kui omni.ja on eemaldatud, leiad faili aadressilt /chrome/devtools/skin/variables.css; Jah, Firefoxi DevToolsi nahk on nime all kroom. In variables.css, näete hulk värvilisi muutujaid, mida kasutatakse nii valgete kui ka tumedate teemade jaoks järgmiselt
: root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-background: # f7f7f7; - teema-kontrasti taust: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; - teema-valik-taust: # 4c9ed9; - teemavalik-taust-läbipaistev: rgba (76, 158, 217, .23); --theme-selection-color: # f5f7fa; --theme-splitter-color: #aaaaaa; --theme-comment: # 757873; --ema-keha-värv: # 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; - peamine-esiletõstev heledus: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Värvid, mida kasutatakse graafikutes, nagu jõudlusvahendid. Sarnased värvid Chrome'i ajajoonega. * / --teemgraafid-rohelised: # 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; - -graafid-hall: #cccccc; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; --theme-sidebar-background: # 181d20; - teema-kontrasti taust: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; - teema-valik-taust: # 1d4f73; - teemavalik-taust-pool-läbipaistev: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; --theme-splitter-color: must; --theme-comment: # 757873; --ema-keha-värv: # 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; - teema-esiletõstev-lilla: # 6b7abb; - teema-esiletõstmine - # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Värvid, mida kasutatakse graafikutes, nagu jõudlusvahendid. Enamasti sarnanevad mõned "esiletõstetud" värvidega. * / - teemad-graafikud-rohelised: # 70bf53; --theme-graphs-blue: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; - -graafid-lilla: # df80ff; - -graafid-kollased: # d99b28; --theme-graphs-orange: # d96629; --theme-graphs-red: # eb5368; - -graafid-hall: # 757873; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f;
Valige teema ja muutujad, mida soovite sihtida, ja lisage need oma "userChrome.css".
Siin on veel mõned minu arendaja tööriistade akna pildid.
