Hogyan viselkedni Hack és személyre szabhatja a Firefox fejlesztői eszközök témáját

A témák a fejlesztők számára személyes dolog, ez nem csak a szerkesztők vagy eszközök szépítéséről szól. Arról van szó, hogy a képernyőt úgy nézzük meg, hogy mi (a sok villogás nélkül) bámuljon jobban, hogy órákon át, produktív módon dolgozzunk. A Firefoxnak két témája van a fejlesztői eszközöknek: sötét és világos. Mindkettő nagyszerű, de a lehetőségek még mindig korlátozottak anélkül, hogy személyre szabnák őket.

Most a Firefox az XUL és a CSS kombinációját használja az UI-hez, ami azt jelenti, hogy a megjelenésének legnagyobb része csak a CSS használatával érhető el. A Mozilla a felhasználók számára lehetővé teszi a termék megjelenésének konfigurálását a "userChrome.css" nevű CSS fájl segítségével. tudsz hozzáadhat egyéni stílusszabályokat a CSS fájlhoz és ez megjelenik a Mozilla termékeken is.

Ebben a bejegyzésben ugyanazt a CSS fájlt fogjuk használni, hogy személyre szabjuk a Firefox fejlesztői eszközeit.

Először meg kell találnunk azt a CSS fájlt, vagy tegyünk egyet, és tedd a megfelelő helyre. A "userChrome.css" -ot tartalmazó mappa megtalálásának egyik gyors módja a következő about: támogatás a böngészőben és a "Profil mappa" címke melletti "Mappa megjelenítése" gombra kattintva. Ez megnyitja a Firefox aktuális profilmappáját.

A profilmappában egy "króm" nevű mappa jelenik meg. Ha nincs, akkor hozzon létre egyet, és hozzon létre egy "userChrome.css" -t. Most, hogy elkészült a fájl, lépjünk a kódra.

: root.theme-dark --theme-body-background: # 050607! fontos; --theme-sidebar-background: # 101416! fontos; --theme-tab-toolbar-background: # 161A1E! fontos; --theme-toolbar-background: # 282E35! fontos; - a téma-kiválasztás-háttér: # 478DAD! --theme-body-color: fontos a # D6D6D6! --theme-body-color-alt: # D6D6D6! fontos; --theme-content-color1: # D6D6D6 fontos; --theme-content-color2: # D6D6D6 fontos; --theme-content-color3: # D6D6D6! fontos; --theme-highlight-green: # 8BF9A6! fontos; --theme-highlight-blue: # 00F9FF! fontos; --theme-highlight-bluegrey: fehér! fontos; - a kiemelkedő világítótest: # FF5A2C! - a téma-kiemelés-narancs: sárga! --theme-highlight-red: # FF1247! fontos; --theme-highlight-pink: # F02898! fontos; 

Amit a fentiekben lát, az a kód, amelyet hozzáadtam a "userChrome.css" fájlhoz, hogy megváltoztassam a fejlesztők eszközének megjelenését ebből

ehhez:

Csak a kontrasztot akartam javítani, sötétebb háttérrel és világosabb szöveggel a sötét témában (nem is vagyok jó a színsémákban), így néhány alapvető színt használtam a sötét témákban. Ha jobb a színekkel, kísérletezzen a színekkel, amint azt látja, hogy megfelelőnek találja, hogy jobban illeszkedjen a használt témához.

A kód csak a CSS színváltozók listája, amelyeket a DevTools különböző UI részeinek színezésére használnak. A kódot egy "variables.css" nevű fájlban találtuk meg egy tömörített fájlban “omni.ja”:

A Windows rendszerben a fájl a következő címen található:

F: /firefox/browser/omni.ja. Helyettesíteni a F: a meghajtóval, ahol a Firefoxot telepítette.

Az OSX-ben a fájl a következő címen található:

~ / Applications / Firefox.app / Contents / Resources / böngésző / omni.ja.

Ezek tömörített Java fájlok. A Windows rendszerben átnevezheti a .ja kiterjesztés .postai irányítószám és használja a natív Windows Intéző kivonat segédprogramot a fájlok belsejéből történő eltávolításához. Az OSX-ben menjen a Terminálra és fusson unzip omni.ja. Ne feledje, hogy a fájl másolatát egy másik könyvtárban kell készítenie.

Az omni.ja kivonása után megtalálhatja a fájlt /chrome/devtools/skin/variables.css; igen, a Firefox DevTools bőr egy nevű mappa alatt van króm. Ban,-ben variables.css, láthatsz egy csomó színváltozót, amelyeket mind a világos, mind a sötét témákhoz használunk az alábbiak szerint

 : root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-background: # f7f7f7; - a téma-kontraszt háttér: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; --theme-selection-background: # 4c9ed9; - elem-kiválasztás-háttér-félig átlátszó: rgba (76, 158, 217, .23); --theme-selection-color: # f5f7fa; --theme-splitter-color: #aaaaaa; --theme-comment: # 757873; --theme-body-color: # 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; --them-kiemelés-világítás: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * A Grafikonokban használt színek, mint például a teljesítményeszközök. Hasonló színek a Chrome idővonalához. * / --theme-graphs-green: # 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; --theme-graphs-grey: #cccccc; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 14171a; --theme-sidebar-background: # 181d20; - a téma-kontraszt háttér: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --theme-selection-background: # 1d4f73; - elem-kiválasztás-háttér-félig átlátszó: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; --theme-splitter-szín: fekete; --theme-comment: # 757873; --theme-body-color: # 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; - a-kiemelés-lila: # 6b7abb; --them-kiemelés-világítás: # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * A Grafikonokban használt színek, mint például a teljesítményeszközök. Többnyire hasonló néhány "kiemelt *" színhez. * / --theme-graphs-green: # 70bf53; --theme-graphs-blue: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; --theme-graphs-purple: # df80ff; --theme-graphs-yellow: # d99b28; --theme-graphs-orange: # d96629; --theme-graphs-red: # eb5368; --theme-graphs-grey: # 757873; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f;  

Válassza ki a megcélozni kívánt témát és változókat, és adja hozzá őket a "userChrome.css" -hez.

Íme néhány további képernyőkép a fejlesztői eszközök ablakából.