Kā Hack & Personalizējiet savu Firefox izstrādātāju rīku tēmu
Tēmas mums ir izstrādātāju personīgā lieta, tas nav tikai redaktoru vai rīku skaistināšana. Tas ir par to, ka ekrāns tiks skatīts (bez daudz mirgošanas), kas ir vairāk pieņemams, lai strādātu stundas stundā un produktīvā veidā. Firefox ir divas izstrādātāju rīku tēmas: tumšs un viegls. Abi ir lieliski, bet opcijas joprojām ir ierobežotas bez tā personalizēšanas.
Tagad Firefox izmanto XUL un CSS kombināciju tās UI, kas nozīmē, ka lielāko daļu tās izskatu var izmainīt, izmantojot tikai CSS. Mozilla nodrošina iespēju lietotājiem konfigurēt savu produktu izskatu ar CSS failu ar nosaukumu "userChrome.css". Jūs varat pievienot CSS failam pielāgotus stila noteikumus un tas tiks atspoguļots Mozilla produktos.
Šajā amatā mēs izmantosim to pašu CSS failu, lai personalizētu Firefox izstrādātāju rīkus.
Pirmkārt, mums ir jāatrod šis CSS fails vai jāizveido tā un jānovieto tā vietā. Viens ātrs veids, kā atrast mapi, kurā atradīsies "userChrome.css", ir, dodoties uz par: atbalsts pārlūkprogrammā un noklikšķinot uz pogas "Rādīt mapi" blakus etiķetei "Profila mape". Tas atvērs pašreizējo Firefox profila mapi.
Profila mapē redzēsiet mapi ar nosaukumu "hroms". Ja tā nav, izveidojiet to un izveidojiet tajā “userChrome.css”. Tagad, kad fails ir izveidots, pārvietosimies uz kodu.
: root.theme-dark --theme-body-background: # 050607! --theme-sidebar-background: # 101416! --theme-tab-toolbar-background: # 161A1E! svarīgi; --theme-toolbar-background: # 282E35! - būtiska atlases fona: # 478DAD! - tēma-ķermeņa krāsa: # D6D6D6! - svarīgākais - ķermeņa krāsa-alt: # D6D6D6! --theme-content-color1: # D6D6D6! --theme-content-color2: # D6D6D6! --theme-content-color3: # D6D6D6! - tēma-izcelt-zaļa: # 8BF9A6! - svarīgākais - galvenais - zils: # 00F9FF! - svarīgākais-baltais - balts! - svarīgākais - izcilais gaismas elements: # FF5A2C! - svarīgākais-oranžs: dzeltens! - svarīgākais - sarkans: # FF1247! --theme-highlight-pink: # F02898!
Iepriekš redzamais ir kods, ko es pievienoju failam "userChrome.css", lai mainītu izstrādātāju rīku izskatu no šī
uz šo:
Es tikai gribēju uzlabot kontrastu nedaudz vairāk ar tumšāku fonu un gaišāku tekstu tumšajā tēmā (arī es neesmu labs krāsu shēmās), tāpēc es paliku ar dažām pamata krāsām, ko parasti izmanto tumšās tēmās. Ja esat labāk ar krāsām, eksperimentējiet pēc saviem ieskatiem ar krāsām, kādas jums šķiet piemērotas, lai atrastu labāku atbilstību jūsu izmantotajai tēmai.
Kods ir tikai CSS krāsu mainīgo saraksts, ko izmanto, lai krāsotu dažādus DevTools UI daļas. Mēs atradām kodu failā ar nosaukumu "variables.css" saspiestā failā ar nosaukumu “omni.ja”:
Sistēmā Windows fails atrodas:
F: /firefox/browser/omni.ja. Nomainiet F: ar disku, kurā esat instalējis Firefox.
OSX failā atrodas:
~ / Pieteikumi / Firefox.app / Saturs / Resursi / pārlūks / omni.ja.
Tie ir saspiesti Java faili. Sistēmā Windows varat pārdēvēt .ja paplašinājums uz .zip un izmantojiet vietējo Windows Explorer ekstrakta utilītu, lai izņemtu tajā esošos failus. OSX sistēmā dodieties uz Terminal un palaidiet unzip omni.ja. Paturiet prātā, lai pirms tam darītu faila kopiju citā direktorijā.
Kad omni.ja ir iegūta, failu var atrast vietnē /chrome/devtools/skin/variables.css; jā, Firefox DevTools āda ir zem nosaukuma hroms. Iekš variables.css, jūs redzēsiet virkni krāsu mainīgo, ko izmanto gan gaišajām, gan tumšajām tēmām šādi
: root.theme-light - temats-ķermeņa fons: #fcfcfc; --theme-sidebar-background: # f7f7f7; - fona kontrasts: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; - tēmas atlases fons: # 4c9ed9; - tematiskās atlases fons - pusdisperts: rgba (76, 158, 217, .23); --theme-selection-color: # f5f7fa; --theme-splitter-color: #aaaaaa; --theme-comment: # 757873; --tēma-ķermeņa krāsa: # 18191a; --theme-body-color-alt: # 585959; --theme-content-color1: # 292e33; --theme-content-color2: # 8fa1b2; --theme-content-color3: # 667380; --theme-highlight-green: # 2cbb0f; - tēma-izcelt-zila: # 0088cc; --theme-highlight-bluegrey: # 0072ab; - tēma-izcelt-violets: # 5b5fff; - tēma-izgaismojums-lightorange: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Krāsās izmantotās krāsas, piemēram, veiktspējas rīki. Līdzīgas krāsas ir Chrome laika skalā. * / - tematiskie grafiki - zaļi: # 85d175; --theme-graphs-blue: # 83b7f6; --theme-graphs-bluegrey: # 0072ab; - tēmas-grafiki-violets: # b693eb; - tēmas-grafiki-dzeltena: # efc052; --theme-graphs-orange: # d97e00; --theme-graphs-red: # e57180; - tēmas-grafiki-pelēks: #cccccc; - tēmas-grafiki-pilna sarkana: # f00; - tēmas-grafiki-pilna zila: # 00f; : root.theme-dark - temats-ķermeņa fons: # 14171a; --theme-sidebar-background: # 181d20; - fona kontrasts: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; - tēmas atlases fons: # 1d4f73; - tematiskās atlases fons - pusdisperts: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; --heme-splitter-krāsa: melna; --theme-comment: # 757873; - tēma-ķermeņa krāsa: # 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; - tematiskais-violets: # 6b7abb; --theme-izcelt-lightorange: # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Krāsās izmantotās krāsas, piemēram, veiktspējas rīki. Pārsvarā tas ir līdzīgs dažām "izcilām *" krāsām. * / - tematiskie grafiki - zaļi: # 70bf53; - tēmas-grafiki-zils: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; - tēmas-grafiki-violets: # df80ff; - tēmas-diagrammas - dzeltena: # d99b28; - tēmas-grafiki-oranži: # d96629; --theme-graphs-red: # eb5368; - tēmas-grafiki-pelēks: # 757873; - tēmas-grafiki-pilna sarkana: # f00; - tēmas-grafiki-pilna zila: # 00f;
Izvēlieties tēmu un mainīgos, kurus vēlaties atlasīt, un pievienojiet tos savam "userChrome.css".
Šeit ir daži mana izstrādātāja rīku loga ekrānšāviņi.
