Kako Hack & Prilagodite svoj Firefox Developer Tools Tema
Teme su osobna stvar za nas programere, ne radi se samo o uljepšavanju urednika ili alata. Radi se o izradi ekrana na koji ćemo gledati (bez puno treptanja) podnošljiviji za rad na satima na produktivan način. Firefox ima dvije teme za razvojne alate: tamnu i svjetlu. Obje su velike, ali opcije su i dalje ograničene bez načina da ih personalizirate.
Sada Firefox koristi kombinaciju XUL-a i CSS-a za korisničko sučelje, što znači da se većina njezinog izgleda može podesiti samo pomoću CSS-a. Mozilla omogućuje korisnicima da konfiguriraju izgled svojih proizvoda pomoću CSS datoteke pod nazivom "userChrome.css". Možeš dodajte pravila prilagođenog stila toj CSS datoteci i to će se odraziti na Mozilla proizvode.
U ovom postu koristit ćemo istu CSS datoteku za personalizaciju razvojnih alata u Firefoxu.
Prvo, moramo pronaći CSS datoteku ili je napraviti i staviti je na pravo mjesto. Jedan brz način pronalaženja mape u kojoj će se nalaziti "userChrome.css" jest odlazak na o: potpori u pregledniku i klikom na gumb "Prikaži mapu" pored oznake "Mapa profila". Time će se otvoriti trenutna mapa profila Firefoxa.
U mapi profila vidjet ćete mapu pod nazivom "chrome". Ako ga nema, napravite ga i stvorite "userChrome.css" u njemu. Sada kada je postavka datoteke gotova, idemo na kod.
: root.theme-dark - theme-body-background: # 050607! važno; - pozadina s bočnom trakom: # 101416! važno; - pozadina alatne trake-tab-trake: # 161A1E! važna; - tema-alatna traka-pozadina: # 282E35! važna; - pozadina za odabir teme: # 478DAD! važno; - boja tijela: # D6D6D6! važna; - theme-body-color-alt: # D6D6D6! važno; - theme-content-color1: # D6D6D6! - theme-content-color2: # D6D6D6! važan; - boja-sadržaja-sadržaja3: # D6D6D6! važna; - theme-highlight-green: # 8BF9A6! - theme-highlight-blue: # 00F9FF! - tema-istaknuti-plava boja: bijela! - theme-highlight-lightorange: # FF5A2C! - tema-istaknuti-narančasta: žuta! važna; - theme-highlight-red: # FF1247! važno; - theme-highlight-pink: # F02898!
Ono što vidite gore je kôd koji sam dodao u datoteku "userChrome.css" kako bih promijenio izgled alata za razvojne programere
na ovo:
Samo sam htio poboljšati kontrast malo više s tamnijom pozadinom i svjetlijim tekstom u tamnoj temi (također nisam dobar u shemama boja), pa sam ostao s nekim osnovnim bojama koje se obično koriste u tamnim temama. Ako ste bolji s bojama, sami eksperimentirajte s bojama koje smatrate prikladnim da biste pronašli bolju podudarnost s temom koju upotrebljavate.
Kôd je samo popis CSS varijabli boja koje se koriste za bojenje raznih dijelova korisničkog sučelja DevTools-a. Pronašli smo kôd u datoteci pod nazivom "variables.css" u komprimiranoj datoteci pod nazivom “omni.ja”:
U sustavu Windows datoteka se nalazi na adresi:
F: /firefox/browser/omni.ja. Zamijenite F: s pogonom na kojem ste instalirali Firefox.
U OSX-u, datoteka se nalazi na adresi:
~ / Programi / Firefox.app / Sadržaj / Resources / preglednik / omni.ja.
To su komprimirane Java datoteke. U sustavu Windows možete preimenovati .ja proširenje na .zip i koristite izvorni uslužni program za vađenje Windows Explorera da biste istovarili datoteke unutar njega. U OSX-u idite na Terminal i pokrenite unzip omni.ja. Imajte na umu da prije toga napravite kopiju datoteke u nekom drugom imeniku.
Kada je omni.ja izvučena, možete pronaći datoteku na /chrome/devtools/skin/variables.css; da, Firefox DevTools skin je pod imenikom krom. U variables.css, vidjet ćete hrpu varijabli boja koje se koriste i za svjetlo i za tamne teme kako slijedi
: root.theme-light - tema-tijelo-pozadina: #fcfcfc; - pozadina s bočnom trakom: # f7f7f7; - tematsko-kontrastna pozadina: # e6b064; - pozadina alatne trake-tab-trake: #ebeced; - temena-alatna traka-pozadina: # f0f1f2; - pozadina odabira teme: # 4c9ed9; - tematski odabir-pozadina-poluprozirna: rgba (76, 158, 217, .23); - boja-odabira teme: # f5f7fa; - boja-razdvajača: #aaaaaa; - komentar o temi: # 757873; - tematska boja tijela: # 18191a; - tematsko tijelo-boja-alt: # 585959; - boja-sadržaja-boje1: # 292e33; - tematska-sadržaj-boja2: # 8fa1b2; - tematsko-sadržajna boja3: # 667380; - theme-highlight-green: # 2cbb0f; - theme-highlight-blue: # 0088cc; - tematska oznaka-plava boja: # 0072ab; - theme-highlight-purple: # 5b5fff; - tematska-istaknuti-svjetlosna: # d97e00; - tema-istaknuti-narančasta: # f13c00; - tema-istaknuto-crveno: # ed2655; - tema-istaknuti-ružičasta: # b82ee5; / * Boje koje se koriste u grafikonima, poput alata za izvedbu. Slične boje za vremensku traku preglednika Chrome. * / - tematski grafikoni zeleni: # 85d175; - tematski grafikoni plavi: # 83b7f6; - tematski grafikoni - plava boja: # 0072ab; - tematski grafikoni-ljubičasti: # b693eb; - tematski-žuti: # efc052; - tematski grafikoni narančasti: # d97e00; - tematski grafikoni crveni: # e57180; - tematski grafovi-sivi: #cccccc; - tematski grafikoni - puni crveni: # f00; - tematski grafikoni - plavi: # 00f; : root.theme-dark - theme-body-background: # 14171a; - pozadina s bočnom trakom: # 181d20; - tematsko-kontrastna pozadina: # b28025; - pozadina trake s alatnim trakama: # 252c33; - pozadina trake s alatnom trakom: # 343c45; - pozadina odabira teme: # 1d4f73; - tematski odabir-pozadina-poluprozirna: rgba (29, 79, 115, .5); - boja-odabira teme: # f5f7fa; - boja razdvajača: crna; - komentar o temi: # 757873; - boja tijela tijela: # 8fa1b2; --theme-body-color-alt: # b6babf; - tematska-sadržajna-boja1: # a9bacb; - tematska-sadržaj-boja2: # 8fa1b2; -temna-sadržaj-boja3: # 5f7387; - tema-istaknuti-zelena: # 70bf53; - theme-highlight-blue: # 46afe3; - tema-istaknuti-plava boja: # 5e88b0; - theme-highlight-purple: # 6b7abb; - tematska-istaknuti-svjetlosni: # d99b28; - tema-istaknuti-narančasta: # d96629; - tema-istaknuto-crveno: # eb5368; - theme-highlight-pink: # df80ff; / * Boje koje se koriste u grafikonima, poput alata za izvedbu. Uglavnom slične nekim "vrhunskim" bojama. * / - tematski grafikoni - zeleni: # 70bf53; - tematski grafikoni plavi: # 46afe3; - tematski grafikoni - plava boja: # 5e88b0; - tematski grafikoni - ljubičasti: # df80ff; - tematski grafovi-žuti: # d99b28; - tematski grafikoni narančasti: # d96629; - tematski grafikoni crveni: # eb5368; - tematski grafikoni sivi: # 757873; - tematski grafikoni - puni crveni: # f00; - tematski grafikoni - plavi: # 00f;
Odaberite temu i varijable koje želite ciljati i dodajte ih u svoj "userChrome.css".
Evo još nekih snimki zaslona mog alata za razvojne alate.
