Firefoxin kehitystyökalujen teeman hakeminen ja muokkaaminen
Teemat ovat meille kehittäjille henkilökohtainen asia, se ei ole pelkästään toimittajien tai työkalujen kaunistaminen. Kyse on siitä, että näytön katsotaan tuijottavan (ilman vilkkumista) paremmin kestäväksi työskennellä tuntikausia ja tuottavasti. Firefoxilla on kaksi kehitystyökalujen teemaa: tumma ja kevyt. Molemmat ovat hyviä, mutta vaihtoehdot ovat edelleen rajallisia ilman, että niitä voidaan mukauttaa.
Nyt Firefox käyttää XUL: n ja CSS: n yhdistelmää UI: lle, mikä tarkoittaa, että suurin osa sen ulkonäöstä voidaan kiertää käyttämällä vain CSS: ää. Mozilla tarjoaa käyttäjille mahdollisuuden määrittää tuotteen ulkoasun CSS-tiedostolla "userChrome.css". Sinä pystyt lisää mukautetun tyylin säännöt kyseiseen CSS-tiedostoon ja se näkyy Mozilla-tuotteissa.
Tässä postissa käytämme samaa CSS-tiedostoa kehittäjän työkalujen muokkaamiseen Firefoxissa.
Ensinnäkin meidän on löydettävä tämä CSS-tiedosto tai tehtävä se ja laitettava se oikeaan paikkaan. Yksi nopea tapa löytää kansio, jossa on "userChrome.css", on mennä Tietoja: tuki selaimessa ja klikkaamalla "Näytä kansio" -painiketta otsikon "Profiilikansio" vieressä. Tämä avaa Firefoxin nykyisen profiilikansion.
Profiili-kansiossa näkyy kansio nimeltä "kromi". Jos se ei ole olemassa, luo yksi ja luo siihen "userChrome.css". Nyt kun tiedoston asettaminen on valmis, siirrymme koodiin.
: root.theme-dark --theme-body-background: # 050607! --theme-sidebar-background: # 101416! --theme-tab-toolbar-background: # 161A1E! --theme-toolbar-background: # 282E35! --teema-valinta-tausta: # 478DAD! --theme-body-color: # D6D6D6! --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! --theme-highlight-bluegrey: valkoinen! - tärkein -merkkivalo: # FF5A2C! --theme-highlight-orange: keltainen! --theme-highlight-red: # FF1247! --theme-highlight-pink: # F02898!
Yllä oleva on koodi, jonka lisäsin "userChrome.css" -tiedostolleni, jotta voit muuttaa kehittäjien työkalujen ulkonäköä tästä
tähän:
Halusin vain parantaa kontrastia hieman tummemmalla taustalla ja kirkkaammalla tekstillä pimeässä teoksessa (en myöskään ole hyvä värimalleissa), joten jäin joitakin perusvärejä, joita tyypillisesti käytettiin pimeissä teemoissa. Jos olet parempi väreillä, kokeile omia värejäsi, kun näet sopivan, kun haluat löytää paremman yhteyden käyttämääsi teemaa varten.
Koodi on vain luettelo CSS-värimuuttujista, joita käytetään DevToolsin eri UI-osien värittämiseen. Löysimme koodin "variables.css" -tiedostosta, jonka nimi on pakattu “omni.ja”:
Windowsissa tiedosto sijaitsee osoitteessa:
F: /firefox/browser/omni.ja. Korvata F: sen aseman kanssa, johon olet asentanut Firefoxin.
OSX: ssä tiedosto sijaitsee osoitteessa:
~ / Sovellukset / Firefox.app / Sisältö / Resources / selain / omni.ja.
Nämä ovat pakattuja Java-tiedostoja. Windowsissa voit nimetä nimen .ja laajennus .postinumero ja poista tiedostot sisäisen Windowsin Resurssienhallinta-apuohjelman avulla. Siirry OSX: ssä Terminaliin ja suorita unzip omni.ja. Muista tehdä kopio tiedostosta toisessa hakemistossa ennen kuin teet sen.
Kun omni.ja on poistettu, löydät tiedoston osoitteesta /chrome/devtools/skin/variables.css; kyllä, Firefox DevTools-iho on nimetty kansio kromi. Vuonna variables.css, näet joukon värimuuttujia, joita käytetään sekä vaaleissa että pimeissä teemoissa seuraavasti
: root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-background: # f7f7f7; - aihe-kontrasti-tausta: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; - aihekohtainen valinta: # 4c9ed9; - aihe-valinta-tausta-puoliläpinäkyvä: rgba (76, 158, 217, .23); --theme-selection-color: # f5f7fa; --theme-splitter-väri: #aaaaaa; --theme-comment: # 757873; --teema-kehon väri: # 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-korostaa-violetti: # 5b5fff; --teema-korostusvalaisin: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Kuvissa käytettävät värit, kuten suorituskyvyn työkalut. Samanlaisia värejä Chrome-aikajanalla. * / - kuvakuvat-vihreä: # 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; - -grafiikka-harmaa: #cccccc; - -grafiikka-täysi-punainen: # f00; - -grafiikka-täysi-sininen: # 00f; : root.theme-dark --theme-body-background: # 14171a; --theme-sidebar-background: # 181d20; - aihe-kontrasti-tausta: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --tapahtuma-tausta: # 1d4f73; - aihe-valinta-tausta-puoliläpinäkyvä: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; --theme-splitter-väri: musta; --theme-comment: # 757873; --teema-kehon väri: # 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; - aihekohtainen-violetti: # 6b7abb; --theme-korostaa-lightorange: # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Kuvissa käytettävät värit, kuten suorituskyvyn työkalut. Enimmäkseen samanlainen kuin jotkin "korostus *" -värit. * / - kuvakuvat-vihreä: # 70bf53; - -grafiikka-sininen: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; - -grafiikka-violetti: # df80ff; - -grafiikka-keltainen: # d99b28; - -grafiikka-oranssi: # d96629; --theme-graphs-red: # eb5368; - -grafiikka-harmaa: # 757873; - -grafiikka-täysi-punainen: # f00; - -grafiikka-täysi-sininen: # 00f;
Valitse haluamasi teema ja muuttujat ja lisää ne "userChrome.css".
Tässä on muutamia kuvakaappauksia kehittäjätyökalujen ikkunasta.
