Kaip nulaužti ir pritaikyti „Firefox“ kūrėjų įrankių temą

Temos yra asmeninis dalykas mums kūrėjams, tai ne tik apie redaktorių ar įrankių kūrimą. Tai reiškia, kad ekranas bus žiūrimas į (be daug mirksėjimo) labiau priimtinas dirbti valandų pabaigoje ir produktyviai. „Firefox“ turi dvi kūrėjų įrankių temas: tamsą ir šviesą. Abi yra puikios, tačiau pasirinktys vis dar yra ribotos be jų individualizavimo.

Dabar „Firefox“ naudoja XUL ir CSS derinį savo UI, o tai reiškia, kad dauguma jo išvaizdos gali būti ištemptos naudojant CSS. „Mozilla“ suteikia vartotojams galimybę konfigūruoti savo produktų išvaizdą su CSS failu, vadinamu „userChrome.css“. Tu gali pridėti pasirinktinio stiliaus taisykles tam CSS failui ir tai atsispindės „Mozilla“ produktuose.

Šiame pranešime mes naudosime tą patį CSS failą, kad personalizuotume „Firefox“ kūrėjo įrankius.

Pirma, turime surasti tą CSS failą arba padaryti jį ir įdėti ją į tinkamą vietą. Vienas greitas būdas rasti aplanką, kuriame bus „userChrome.css“, yra eiti į apie: palaikymas naršyklėje ir spustelėję mygtuką „Rodyti aplanką“ šalia etiketės „Profilio aplankas“. Taip bus atidarytas dabartinis „Firefox“ profilio aplankas.

Profilio aplanke matysite aplanką „chrome“. Jei tai nėra, sukurkite vieną ir sukurkite „userChrome.css“. Dabar, kai failas sukuriamas, pereikime prie kodo.

: root.theme-dark --theme-body-background: # 050607! --theme-sidebar-background: # 101416! svarbu; --theme-tab-toolbar-background: # 161A1E! svarbu; --theme-toolbar background: # 282E35! svarbu; - svarbiausia - atrankos fonas: # 478DAD! --Tema-kūno spalva: # D6D6D6! - svarbiausias - kūno-spalvos-alt: # D6D6D6! --theme-content-color1: # D6D6D6! --theme-content-color2: # D6D6D6! --theme-content-color3: # D6D6D6! - svarbiausias-akcentas-žalias: # 8BF9A6! - svarbiausias-akcentas-mėlynas: # 00F9FF! - svarbiausias-akcentas-bluegrey: baltas! - svarbiausias-akcentas-švyturys: # FF5A2C! - svarbiausia-oranžinė: geltona! - svarbiausias-akcentas-raudonas: # FF1247! --theme-highlight-pink: # F02898! svarbu; 

Tai, ką matote aukščiau, yra kodas, kurį pridėjau prie failo „userChrome.css“, kad pakeistumėte kūrėjų įrankių išvaizdą iš šio

šiam:

Aš tik norėjau pagerinti kontrastą šiek tiek labiau tamsesniame fone ir šviesesniame tekste tamsioje temoje (taip pat nesu gerai spalvų schemose), todėl liko tam tikrose pagrindinėse spalvose, kurios paprastai naudojamos tamsiose temose. Jei esate geriau su spalvomis, eksperimentuokite su spalvomis, kaip matote, kad rastumėte geresnę atitiktį jūsų naudojamai temai.

Šis kodas yra tik CSS spalvų kintamųjų, naudojamų įvairioms DevTools UI dalims spalvoti, sąrašas. Mes suradome kodą faile, vadinamame „variables.css“, suspausto failo pavadinime “omni.ja”:

„Windows“ failas yra:

F: /firefox/browser/omni.ja. Pakeiskite F: su disku, kuriame įdiegėte „Firefox“.

OSX faile yra:

~ / Programos / „Firefox.app“ / Turinys / ištekliai / naršyklė / omni.ja.

Tai yra suspaustas „Java“ failai. Windows sistemoje galite pervardyti .ja pratęsimas .zip ir naudokite vietinę „Windows Explorer“ ekstraktų priemonę, kad galėtumėte ištrinti failus joje. OSX sistemoje eikite į terminalą ir paleiskite unzip omni.ja. Turėkite omenyje, kad prieš tai atlikdami failo kopiją padarykite kitą katalogą.

Kai „omni.ja“ bus išgauta, failą galite rasti adresu /chrome/devtools/skin/variables.css; taip, „Firefox DevTools“ oda yra po pavadinimu chromas. Viduje konors variables.css, pamatysite spalvų kintamųjų krūvą, naudojamą tiek šviesiai, tiek tamsioms temoms

 : root.theme-light --theme-body-background: #fcfcfc; --theme-sidebar-background: # f7f7f7; - teminio kontrasto fonas: # e6b064; --theme-tab-toolbar-background: #ebeced; --theme-toolbar-background: # f0f1f2; - temos atrankos fonas: # 4c9ed9; - temos atranka-fonas-pusiau skaidrus: 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; --pagrindinis-mėlynas: # 0088cc; --theme-highlight-bluegrey: # 0072ab; --pagrindinis-violetinis: # 5b5fff; --pagrindinis-švyturys: # d97e00; --theme-highlight-orange: # f13c00; --theme-highlight-red: # ed2655; --theme-highlight-pink: # b82ee5; / * Spalvose naudojamos diagramos, pvz., Našumo įrankiai. Panašios spalvos yra „Chrome“ laiko juostoje. * / - temos-grafikai-žalios: # 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 - temos-kūno fonas: # 14171a; --theme-sidebar-background: # 181d20; - pagrindinio kontrasto fonas: # b28025; --theme-tab-toolbar-background: # 252c33; --theme-toolbar-background: # 343c45; --pasirinkimo fonas: # 1d4f73; - temos atranka-fonas-pusiau skaidrus: rgba (29, 79, 115, .5); --theme-selection-color: # f5f7fa; --theme-splitter-color: juoda; --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; --pagrindinis-violetinis: # 6b7abb; --pagrindinis-švyturys: # d99b28; --theme-highlight-orange: # d96629; --theme-highlight-red: # eb5368; --theme-highlight-pink: # df80ff; / * Spalvose naudojamos diagramos, pvz., Našumo įrankiai. Dažniausiai panaši į kai kurias „išryškintas *“ spalvas. * / - temos-grafikai-žalios: # 70bf53; --theme-graphs-blue: # 46afe3; --theme-graphs-bluegrey: # 5e88b0; - temos-grafikai-violetinė: # df80ff; - temos - geltonos spalvos: # d99b28; --theme-graphs-orange: # d96629; --theme-graphs-red: # eb5368; --theme-graphs-grey: # 757873; --theme-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f;  

Pasirinkite temą ir kintamuosius, kuriuos norite nukreipti, ir pridėkite juos prie „userChrome.css“.

Štai keletas daugiau mano kūrėjo įrankių lango ekrano kopijų.