Ako Hack & Prispôsobiť Tvoja

Témy sú pre nás vývojármi osobná vec, nie je to len skrášlenie editorov alebo nástrojov. Ide o to, aby sa obrazovka, na ktorej budeme pozerať (bez toho, aby sme mrkli veľa), bola viac znesiteľná, aby sme pracovali na niekoľko hodín na konci a produktívne. Firefox má dve témy pre vývojárske nástroje: tmavé a ľahké. Obaja sú skvelé, ale možnosti sú stále obmedzené bez možnosti ich prispôsobenia.

Teraz Firefox používa pre svoje užívateľské rozhranie kombináciu XUL a CSS, čo znamená, že väčšina jeho vzhľadu môže byť vylepšená len pomocou CSS. Mozilla poskytuje používateľom možnosť konfigurovať vzhľad svojich produktov pomocou súboru CSS s názvom "userChrome.css". Môžeš pridajte do tohto súboru CSS vlastné pravidlá štýlu a to sa prejaví na produktoch Mozilla.

V tomto príspevku budeme využívať rovnaký súbor CSS na prispôsobenie vývojárskych nástrojov vo Firefoxe.

Po prvé, musíme nájsť súbor CSS alebo ho vytvoriť a umiestniť na správne miesto. Jeden rýchly spôsob, ako nájsť priečinok, ktorý bude obsahovať "userChrome.css", je ísť about: podporu v prehliadači a kliknutím na tlačidlo "Zobraziť priečinok" vedľa štítku "Priečinok profilu". Tým sa otvorí aktuálny priečinok profilu prehliadača Firefox.

V priečinku profilu sa zobrazí priečinok s názvom "chrome". Ak to nie je, vytvorte si ho a vytvorte v ňom "userChrome.css". Po dokončení nastavenia súboru prejdime na kód.

: root.theme-dark -theme-body-background: # 050607! --theme-sidebar-background: # 101416! --theme-tab-toolbar-background: # 161A1E! --theme-toolbar-background: # 282E35! - téma-výber-pozadie: # 478DAD! - theme-body-color: # D6D6D6! dôležité; -theme-body-color-alt: # D6D6D6! dôležité; - téma-obsah-farba1: # D6D6D6! dôležité; - téma-obsah-farba2: # D6D6D6! dôležité; - téma-obsah-farba3: # D6D6D6! dôležité; --theme-highlight-green: # 8BF9A6! - theme-highlight-blue: # 00F9FF! - theme-highlight-bluegrey: biely! --theme-highlight-lightorange: # FF5A2C! dôležité; - theme-highlight-oranžová: žltá! - theme-highlight-červená: # FF1247! --theme-highlight-pink: # F02898! 

Čo vidíte vyššie, je kód, ktorý som pridal do môjho súboru "userChrome.css", aby som zmenil vzhľad nástrojov pre vývojárov z tohto

do tohto:

Chcel som len zlepšiť kontrast trochu viac s tmavším pozadím a jasnejším textom v temnej tematike (tiež nie som dobrý v farebných schémach), takže som zostal s niektorými základnými farbami, ktoré sa zvyčajne používajú v temných témach. Ak ste lepšie s farbami, experimentujte sami s farbami podľa vlastného uváženia, aby ste našli lepšiu zhodu pre tému, ktorú používate.

Kód je len zoznam farebných premenných CSS používaných na farbenie rôznych častí rozhrania DevTools. Kód bol nájdený v súbore s názvom "variables.css" v komprimovanom súbore s názvom “omni.ja”:

V systéme Windows sa súbor nachádza na adrese:

F: /firefox/browser/omni.ja. Nahradiť F: s jednotkou, na ktorej ste nainštalovali svoj Firefox.

V súbore OSX sa súbor nachádza na adrese:

~ / Applications / Firefox.app / Contents / Resources / browser / omni.ja.

Sú to komprimované súbory Java. V systéme Windows môžete premenovať .ja rozšírenie na .zips a použite natívny nástroj na extrakciu programu Windows Explorer na uvoľnenie súborov v ňom. V OSX prejdite na Terminál a spustite unzip omni.ja. Majte na pamäti, že ste skôr, ako urobíte kópiu súboru v inom adresári.

Po extrahovaní omni.ja nájdete súbor na adrese /chrome/devtools/skin/variables.css; áno, koža Firefox DevTools je pod adresou s názvom chróm. V variables.css, uvidíte veľa farebných premenných používaných pre ľahké i tmavé témy nasledovne

 : root.theme-svetlo -theme-body-background: # fcfcfc; -theme-sidebar-background: # f7f7f7; -theme-contrast-background: # e6b064; -theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; -theme-selection-background: # 4c9ed9; - výber témy - polopriepustný pozadie: rgba (76, 158, 217, .23); -thema-selection-color: # f5f7fa; - theme-splitter-color: #aaaaaa; - téma-komentár: # 757873; -theme-body-color: # 18191a; -theme-body-color-alt: # 585959; --theme-content-color1: # 292e33; --theme-content-color2: # 8fa1b2; - téma-obsah-farba3: # 667380; -thema-highlight-green: # 2cbb0f; -thema-highlight-blue: # 0088cc; - theme-highlight-bluegrey: # 0072ab; -thema-highlight-fialová: # 5b5fff; -thema-highlight-lightorange: # d97e00; -theme-highlight-oranžová: # f13c00; -thema-highlight-red: # ed2655; -thema-highlight-pink: # b82ee5; / * Farby používané v grafoch, ako nástroje výkonu. Podobné farby časovej osi Chrome. * / -gramatické grafy-zelené: # 85d175; - tematické grafy-modrá: # 83b7f6; - tematické grafy-bluegrey: # 0072ab; -theme-graf-fialová: # b693eb; - grafy - žltá: # efc052; -theme-grafs-orange: # d97e00; - grafy červenej: # e57180; -theme-grafs-gray: #cccccc; -theme-grafy-full-red: # f00; - tematické grafy: plné modré: # 00f; : root.theme-dark -theme-body-background: # 14171a; -theme-sidebar-background: # 181d20; -theme-contrast-background: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; -theme-selection-background: # 1d4f73; - téma-výber-pozadie-polopriehľadný: rgba (29, 79, 115, .5); -thema-selection-color: # f5f7fa; - farba-rozdeľovač-farba: čierna; - téma-komentár: # 757873; -thema-body-color: # 8fa1b2; -theme-body-color-alt: # b6babf; --theme-content-color1: # a9bacb; --theme-content-color2: # 8fa1b2; - téma-obsah-farba3: # 5f7387; - thetheme-highlight-green: # 70bf53; -thema-highlight-blue: # 46afe3; --theme-highlight-bluegrey: # 5e88b0; --thema-highlight-fialová: # 6b7abb; -thema-highlight-lightorange: # d99b28; -theme-highlight-orange: # d96629; -thema-highlight-red: # eb5368; -thema-highlight-pink: # df80ff; / * Farby používané v grafoch, ako nástroje výkonu. Väčšinou podobné niektorým farbám "highlight- *". * / -gramatické grafy-zelené: # 70bf53; - tematické grafy-modrá: # 46afe3; - tematické grafy-modrozelená: # 5e88b0; -theme-graf-fialová: # df80ff; - grafy - žltá: # d99b28; -theme-grafs-orange: # d96629; - tematické grafy-červená: # eb5368; - grafy témy-sivá: # 757873; -theme-grafy-full-red: # f00; - tematické grafy: plné modré: # 00f;  

Vyberte tému a premenné, ktoré chcete zacieliť, a pridajte ich do svojho "userChrome.css".

Tu je niekoľko snímok obrazovky v okne vývojárskych nástrojov.