Cum să hack și personalizați Tematica Instrumentelor de Dezvoltare Firefox

Temele sunt un lucru personal pentru dezvoltatorii noștri, nu este vorba doar de înfrumusețarea editorilor sau a instrumentelor. Este vorba de a face ecranul pe care vom fi uita la (fără a clipi prea mult) mai suportabil să lucreze pentru ore întregi și într-o manieră productivă. Firefox are două teme pentru instrumentele de dezvoltare: întuneric și ușor. Ambele sunt minunate, dar opțiunile sunt încă limitate fără o modalitate de a le personaliza.

Acum, Firefox folosește o combinație de XUL și CSS pentru UI, ceea ce înseamnă că cea mai mare parte a aspectului său poate fi modificată folosind doar CSS. Mozilla oferă utilizatorilor posibilitatea de a configura aspectul produselor lor cu un fișier CSS numit "userChrome.css". Poti adăugați reguli de stil personalizat la acel fișier CSS și se va reflecta asupra produselor Mozilla.

În acest post vom folosi același fișier CSS pentru a personaliza instrumentele pentru dezvoltatori din Firefox.

În primul rând, trebuie să găsim fișierul CSS sau să îl facem și să-l punem în locul potrivit. O modalitate rapidă de a găsi folderul care va găzdui "userChrome.css" este accesând despre: suport în browser și dând clic pe butonul "Afișați dosarul" de lângă eticheta "Folder profil". Aceasta va deschide folderul profilului curent al Firefox.

În dosarul profilului, veți vedea un folder numit "crom". Dacă nu există, creați unul și creați un "userChrome.css" în el. Acum, când se face instalarea fișierului, să trecem la cod.

: root.theme-dark - tema-corp-fundal: # 050607 important! - tema-sidebar-background: # 101416 important! - tema-tab-bara de instrumente-fundal: # 161A1E! important; - tema-bara de instrumente-fundal: # 282E35! important; - tema-selecție-fundal: # 478DAD! important; - temă-corp-culoare: # D6D6D6 important! - tema-corp-culoare-alt: # D6D6D6 important! - temă-conținut-color1: # D6D6D6! important; - temă-conținut-color2: # D6D6D6 important! - temă-conținut-color3: # D6D6D6 important! - temă - evidențiere-verde: # 8BF9A6! important; - temă-albastru: # 00F9FF important; - temă - evidențiere - albastră: albă importantă; - temă-lumină-lumină: # FF5A2C! important; - temă-culoarea-portocaliu: galben! important; --thema-highlight-red: # FF1247! important; --thema-highlight-roz: # F02898! important; 

Ceea ce vedeți mai sus este codul pe care l-am adăugat în fișierul "userChrome.css" pentru a modifica aspectul instrumentelor pentru dezvoltatori din acest

la acest:

Am vrut doar să îmbunătățesc contrastul cu un fundal mai întunecat și un text mai strălucitor în tema întunecată (și eu nu sunt bun la schemele de culori), așa că am rămas cu câteva culori de bază utilizate în mod obișnuit în teme întunecate. Dacă sunteți mai bine cu culorile, experimentați pe cont propriu cu culorile după cum considerați potrivit pentru a găsi o potrivire mai bună pentru tema pe care o utilizați.

Codul este doar o listă de variabile de culoare CSS utilizate pentru colorarea diferitelor părți ale UI ale DevTools. Am găsit codul într-un fișier numit "variables.css" într-un fișier comprimat numit “omni.ja”:

În Windows, fișierul se află la:

F: /firefox/browser/omni.ja. Inlocuieste F: cu unitatea în care ați instalat Firefox-ul.

În OSX, fișierul este localizat la:

~ / Aplicații / Firefox.app / Conținut / Resurse / browser-ul / omni.ja.

Acestea sunt fișiere comprimate Java. În Windows, aveți posibilitatea să redenumiți .ja extinderea la .zip și utilizați utilitarul nativ de extragere Windows Explorer pentru a descărca fișierele din el. În OSX, du-te la Terminal și rulați unzip omni.ja. Rețineți să faceți o copie a fișierului într-un alt director înainte de a face acest lucru.

Odată ce omni.ja a fost extras, puteți găsi fișierul la /chrome/devtools/skin/variables.css; da, skin-ul Firefox DevTools se află sub un dosar numit crom. În variables.css, veți vedea o grămadă de variabile de culoare utilizate atât pentru temele luminoase, cât și pentru cele întunecate, după cum urmează

 : root.theme-light --mai-corp-fundal: #fcfcfc; - temă-sidebar-background: # f7f7f7; - fundal-contrast: # e6b064; --mai-tab-toolbar-background: #ebeced; - tema-bara de instrumente-fundal: # f0f1f2; - temă-selecție-fundal: # 4c9ed9; - selectarea temei-fundal-semitransparent: rgba (76, 158, 217, .23); - temă-selecție-culoare: # f5f7fa; --Theme-splitter-color: #aaaaaa; - tema-comentariu: # 757873; - tema-corp-culoare: # 18191a; - temă-corp-culoare-alt: # 585959; - temă-conținut-color1: # 292e33; - temă-conținut-color2: # 8fa1b2; - temă-conținut-color3: # 667380; - temă - evidențiere-verde: # 2cbb0f; - temă-albastru: # 0088cc; - temă-evidențiere-albastră: # 0072ab; - temă - evidențiere-violet: # 5b5fff; - temă-evidențiere-lumină: # d97e00; - temă-evidențiere-portocalie: # f13c00; - temă-evidențiere-roșie: # ed2655; - temă-evidențiere-roz: # b82ee5; / * Culorile folosite în Grafice, cum ar fi uneltele de performanță. Culori similare cu cronologia Chrome. * / - grafice-temă-verde: # 85d175; - grafice-temă-albastru: # 83b7f6; - grafice-temă-albastru: # 0072ab; - grafice-temă-violet: # b693eb; - grafice-temă-galben: # efc052; - grafice-temă-portocaliu: # d97e00; - grafice-temă-roșu: # e57180; - grafice-temă-gri: #cccccc; - grafice-temă-roșu plin: # f00; - graficele-temă-albastru-plin: # 00f; : root.theme-dark - temă-corp-fundal: # 14171a; - tema-sidebar-fundal: # 181d20; - temă-contrast-fundal: # b28025; --mai-tab-bara de instrumente-fundal: # 252c33; - tema-bara de instrumente-fundal: # 343c45; - temă-selecție-fundal: # 1d4f73; - selectarea temei-fundal-semitransparent: rgba (29, 79, 115, .5); - temă-selecție-culoare: # f5f7fa; - tema-splitter-culoare: negru; - tema-comentariu: # 757873; - tema-corp-culoare: # 8fa1b2; - temă-corp-culoare-alt: # b6babf; - temă-conținut-color1: # a9bacb; - temă-conținut-color2: # 8fa1b2; - temă-conținut-color3: # 5f7387; - temă-culoarea verde: # 70bf53; - temă-albastru: # 46afe3; - temă - evidențiere-albastru: # 5e88b0; - temă-evidențiere-violet: # 6b7abb; - temă-evidențiere-lumină: # d99b28; - temă-culoarea-verde: # d96629; - temă - evidențiere-roșu: # eb5368; - temă-evidențiere-roz: # df80ff; / * Culorile folosite în Grafice, cum ar fi uneltele de performanță. În mare măsură similar cu unele culori "highlight- *". * / - grafice-temă-verde: # 70bf53; - temele-grafice-albastru: # 46afe3; - grafice-temă-albastru: # 5e88b0; - temele-grafice-violet: # df80ff; - grafice-temă-galben: # d99b28; - grafice-temă-portocaliu: # d96629; - grafice-temă-roșu: # eb5368; - grafice-temă-gri: # 757873; - grafice-temă-roșu plin: # f00; - graficele-temă-albastru-plin: # 00f;  

Alegeți tema și variabilele pe care doriți să le vizați și le adăugați la "userChrome.css".

Iată câteva screenshot-uri ale ferestrei instrumentelor mele de dezvoltatori.