Как да хакнете и персонализирате темата за инструментите за разработчици на Firefox

Темите са лично нещо за нас разработчици, не става въпрос само за разкрасяване на редактори или инструменти. Става дума за правенето на екрана, на който ще се взираме (без да мига много) по-поносимо да работим в продължение на часове и по продуктивен начин. Firefox има две теми за инструментите за разработчици: тъмно и светло. И двете са страхотни, но опциите все още са ограничени, без начин да ги персонализирате.

Сега, Firefox използва комбинация от XUL и CSS за своя потребителски интерфейс, което означава, че по-голямата част от външния му вид може да бъде променен, използвайки само CSS. Mozilla предоставя на потребителите възможност да конфигурират изгледа на продуктите си с CSS файл, наречен "userChrome.css". Можеш добавете потребителски правила за стила към този CSS файл и ще се отрази на продуктите на Mozilla.

В тази публикация ще използваме същия CSS файл, за да персонализираме инструментите за разработчици във Firefox.

Първо, трябва да намерим този CSS файл или да го направим и да го поставим на правилното място. Един бърз начин да намерите папката, в която ще се намира "userChrome.css", е като отидете на за: подкрепа в браузъра и кликвайки върху бутона „Показване на папката“ до етикета „Папка с профила“. Това ще отвори текущата папка на профила на Firefox.

В папката с профили ще видите папка с име „chrome“. Ако не е там, създайте такъв и създайте в него userChrome.css. Сега, когато настройката на файла е свършена, нека преминем към кода.

: root.theme-dark - тема-фон-тяло: # 050607! важно; - фон на тематичната лента: # 101416! важно; - фон на темата-таб-лента с инструменти: # 161A1E! важно; - тема-лента с инструменти-фон: # 282E35! - фон за избор на тема: # 478DAD! - цвят на тялото: # D6D6D6! - тема-тяло-цвят-алт: # D6D6D6! - theme-content-color1: # D6D6D6! - тема-съдържание-color2: # D6D6D6! - тема-съдържание-color3: # D6D6D6! - тема-маркирай-зелено: # 8BF9A6! - тема-подчертава-синя: # 00F9FF! - тема-подчертава-синята: бяла! - тема-осветление-светлина: # FF5A2C! - тема-маркиране-оранжево: жълто! - тема-подчертава червено: # FF1247! - тема-подчертава-розова: # F02898! 

Това, което виждате по-горе, е кодът, който добавих към моя файл "userChrome.css", за да променя вида на инструментите на разработчиците от това

до това:

Исках само да подобря контраста малко повече с по-тъмен фон и по-ярък текст в тъмната тема (също не съм добър в цветовите схеми), така че останах с някои основни цветове, които обикновено се използват в тъмни теми. Ако сте по-добри с цветовете, експериментирайте сами с цветовете, които смятате за подходящи, за да намерите по-добро съвпадение за темата, която използвате.

Кодът е само списък от CSS цветови променливи, използвани за оцветяване на различните части на интерфейса на DevTools. Намерихме кода във файл, наречен "variables.css" в компресиран файл с име “omni.ja”:

В Windows файлът се намира на адрес:

F: /firefox/browser/omni.ja. Заменете F: с устройството, на което сте инсталирали Firefox.

В OSX файлът се намира на адрес:

~ / Applications / Firefox.app / Съдържание / ресурси / браузър / omni.ja.

Това са компресирани Java файлове. В Windows можете да преименувате .йа разширение до .цип и използвайте изходната програма за извличане на Windows Explorer, за да разтоварите файловете в нея. В OSX отидете на Терминал и стартирайте unzip omni.ja. Имайте предвид, че трябва да направите копие на файла в друга директория, преди да го направите.

След изваждането на omni.ja можете да намерите файла на адрес /chrome/devtools/skin/variables.css; Да, кожата на Firefox DevTools е в папката с име хром. В variables.css, ще видите много цветни променливи, използвани както за светлите, така и за тъмните теми, както следва

 : root.theme-light - тема-тяло-фон: #fcfcfc; - фон на тематичната лента: # f7f7f7; - тема-фон-контраст: # e6b064; - фон на темата-таб-лента с инструменти: #ebeced; - фон-лента с инструменти: # f0f1f2; - фон за избор на тема: # 4c9ed9; - тема-селекция-фон-полупрозрачна: rgba (76, 158, 217, .23); - цвят за избор на тема: # f5f7fa; - цвят на разделителя на темата: #aaaaaa; - коментар за темата: # 757873; - цвят на тялото: # 18191a; - тема-тяло-цвят-алт: # 585959; - тема-съдържание-цвят1: # 292е33; - тема-съдържание-цвят2: # 8fa1b2; - цвят на съдържанието на темата3: # 667380; - тема-маркиране-зелено: # 2cbb0f; - тема-подчертава-синьо: # 0088cc; - тема-подчертава-синята: # 0072ab; - тема-подчертае-лилаво: # 5b5fff; - тема-осветление-светлина: # d97e00; - тема-маркиране-оранжево: # f13c00; - тема-подчертава червено: # ed2655; - тема-подчертава-розова: # b82ee5; / * Цветове, използвани в графиките, като инструменти за ефективност. Подобни са цветовете на хронологията на Chrome. * / - тематични графики-зелени: # 85d175; -тематични графики-сини: # 83b7f6; - тематични графики-сини: # 0072ab; - тематични графики - лилаво: # b693eb; - тематични графики-жълти: # efc052; - тематични графики-оранжеви: # d97e00; - тематични графики - червено: # e57180; - тематични графики-сиви: #cccccc; - тематични графики - пълночервени: # f00; - тематични графики в синьо: # 00f; : root.theme-dark - тема-фон-тяло: # 14171a; - фон на тематичната лента: # 181d20; - фон-контраст: # b28025; - фон на темата-таб-лента с инструменти: # 252c33; - фон-лента с инструменти: # 343c45; - фон за избор на тема: # 1d4f73; - тема-селекция-фон-полупрозрачен: rgba (29, 79, 115, .5); - цвят за избор на тема: # f5f7fa; - цвят на разделителя: черен; - коментар за темата: # 757873; - цвят на тялото на темата: # 8fa1b2; --theme-body-color-alt: # b6babf; - тема-съдържание-color1: # a9bacb; - тема-съдържание-цвят2: # 8fa1b2; - цвят на съдържанието на темата3: # 5f7387; - тема-маркиране-зелено: # 70bf53; - тема-подчертава-синьо: # 46afe3; - тема-подчертава-синята: # 5e88b0; - тема-подчертае-лилаво: # 6b7abb; - тема-осветление-светлина: # d99b28; - тема-маркиране-оранжево: # d96629; - тема-подчертава червено: # eb5368; --theme-highlight-pink: # df80ff; / * Цветове, използвани в графиките, като инструменти за ефективност. Най-често подобни на някои цветове "подчертае *". * / - тематични графики-зелени: # 70bf53; - тематични графики-сини: # 46afe3; - тематични графики-сини: # 5e88b0; - тематични графики - лилаво: # df80ff; -тематични графики-жълти: # d99b28; - тематични графики-оранжеви: # d96629; - тематични графики - червено: # eb5368; - тематични графики-сиви: # 757873; - тематични графики - пълночервени: # f00; - тематични графики в синьо: # 00f;  

Изберете темата и променливите, които искате да насочите, и ги добавете към своя "userChrome.css".

Ето още няколко скрийншота от прозореца на инструментите за разработчици.