Как взломать и персонализировать тему инструментов Firefox для разработчиков
Темы являются личным делом для нас, разработчиков, речь идет не только об украшении редакторов или инструментов. Речь идет о том, чтобы сделать экран, на который мы будем смотреть (не моргая), более сносным, чтобы работать в течение нескольких часов подряд и продуктивно. У Firefox есть две темы для инструментов разработчика: темная и светлая. Оба великолепны, но варианты по-прежнему ограничены без возможности персонализировать их.
Теперь Firefox использует комбинацию XUL и CSS для своего пользовательского интерфейса, что означает, что большая часть его внешнего вида может быть изменена с помощью только CSS. Mozilla предоставляет пользователям возможность настроить внешний вид своих продуктов с помощью файла CSS с именем «userChrome.css». Вы можете добавить собственные правила стилей в этот файл CSS, и это будет отражено в продуктах Mozilla.
В этой статье мы будем использовать этот же CSS-файл для персонализации инструментов разработчика в Firefox.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Во-первых, нам нужно найти этот CSS-файл или создать его и поместить в нужное место. Один из быстрых способов найти папку, в которой будет храниться «userChrome.css», — перейти в браузер about: support и нажать кнопку «Показать папку» рядом с надписью «Папка профиля». Это откроет папку текущего профиля Firefox.
- В папке профиля вы увидите папку с именем «chrome». Если его там нет, создайте его и создайте в нем «userChrome.css». Теперь, когда настройка файла завершена, давайте перейдем к коду.
- root.theme-dark {
—theme-body-background: # 050607! важный;
—theme-sidebar-background: # 101416! важный;
—theme-tab-toolbar-background: # 161A1E! важный;
—theme-toolbar-background: # 282E35! важный;
—theme-selection-background: # 478DAD! важный;
—theme-body-color: # D6D6D6! важный;
—theme-body-color-alt: # D6D6D6! важный;
—theme-content-color1: # D6D6D6! важный;
—theme-content-color2: # D6D6D6! важный;
—theme-content-color3: # D6D6D6! важный;
—theme-highlight-green: # 8BF9A6! важный;
—theme-highlight-blue: # 00F9FF! важный;
— Theme-Highlight-Bluegrey: белый! важно;
—theme-highlight-lightorange: # FF5A2C! важный;
— тема-выделите-оранжевый: желтый! важно;
—theme-highlight-red: # FF1247! важный;
—theme-highlight-pink: # F02898! важный;
}
Вы видите выше код, который я добавил в свой файл «userChrome.css», чтобы изменить внешний вид инструментов разработчика из этого
к этому:
Я только хотел немного улучшить контраст с более темным фоном и более ярким текстом в темной теме (также я не очень хорош в цветовых схемах), поэтому я остановился на некоторых основных цветах, обычно используемых в темных темах. Если вы лучше разбираетесь с цветами, поэкспериментируйте самостоятельно с цветами, которые вы считаете нужными, чтобы найти лучшее соответствие для используемой вами темы.
Код — это просто список цветовых переменных CSS, используемых для окрашивания различных частей пользовательского интерфейса DevTools. Мы нашли код в файле с именем «variables.css» в сжатом файле с именем «omni.ja»:
В Windows файл находится по адресу:
F: /firefox/browser/omni.ja. Замените F: на диск, на котором вы установили Firefox.
В OSX файл находится по адресу:
~ / Применение / Firefox.app / Содержание / Ресурсы / браузер / omni.ja.
Это сжатые файлы Java. В Windows вы можете переименовать расширение .ja в .zip и использовать встроенную утилиту извлечения Windows Explorer, чтобы выгрузить файлы внутри него. В OSX перейдите в Терминал и запустите unzip omni.ja. Имейте в виду, чтобы сделать копию файла в другом каталоге, прежде чем делать это.
- Как только файл omni.ja будет извлечен, вы можете найти файл по адресу /chrome/devtools/skin/variables.css; да, обложка Firefox DevTools находится в папке с именем chrome. в variables.cssвы увидите множество цветовых переменных, используемых как для светлых, так и темных тем, следующим образом
-
root.theme-light {
—theme-body-background: #fcfcfc;
—theme-sidebar-background: # f7f7f7;
—theme-контраст-фон: # e6b064;
—theme-tab-toolbar-background: #ebeced;
—theme-toolbar-background: # f0f1f2;
—theme-selection-background: # 4c9ed9;
—theme selection-background-semitransparent: rgba (76, 158, 217, .23);
—theme-selection-color: # f5f7fa;
— тема-цвет-разделитель: #aaaaaa;
— тема-комментарий: # 757873;
— тема-цвет тела: # 18191a;
—theme-body-color-alt: # 585959;
—theme-content-color1: # 292e33;
—theme-content-color2: # 8fa1b2;
—theme-content-color3: # 667380;
—theme-highlight-green: # 2cbb0f;
— тема-подсветка синего цвета: # 0088cc;
—theme-highlight-bluegrey: # 0072ab;
—theme-highlight-purple: # 5b5fff;
—theme-highlight-lightorange: # d97e00;
— тема-подсветка оранжевого цвета: # f13c00;
—theme-highlight-red: # ed2655;
—theme-highlight-pink: # b82ee5;
- / * Цвета, используемые в графиках, как инструменты производительности. Подобные цвета на временной шкале Chrome. * /
- —the-graphs-green: # 85d175;
- —theme-graphs-blue: # 83b7f6;
- —theme-graphs-bluegrey: # 0072ab;
- —theme-graphs-purple: # b693eb;
- -theme-graphs-yellow: # efc052;
- -theme-graphs-orange: # d97e00;
- —the-graphs-red: # e57180;
- —theme-graphs-grey: #cccccc;
- —theme-graphs-full-red: # f00;
- —theme-graphs-full-blue: # 00f;
- }
-
root.theme-dark {
— тема-тело-фон: # 14171a;
—theme-sidebar-background: # 181d20;
—theme-контраст-фон: # b28025;
—theme-tab-toolbar-background: # 252c33;
—theme-toolbar-background: # 343c45;
—theme-selection-background: # 1d4f73;
—theme selection-background-semitransparent: rgba (29, 79, 115, .5);
—theme-selection-color: # f5f7fa;
— тема-цвет сплиттера: черный;
— тема-комментарий: # 757873;
— тема-цвет тела: # 8fa1b2;
—theme-body-color-alt: # b6babf;
—theme-content-color1: # a9bacb;
—theme-content-color2: # 8fa1b2;
—theme-content-color3: # 5f7387;
—theme-highlight-green: # 70bf53;
— тема-подсветка синего цвета: # 46afe3;
—theme-highlight-bluegrey: # 5e88b0;
—theme-highlight-purple: # 6b7abb;
—theme-highlight-lightorange: # d99b28;
—theme-highlight-orange: # d96629;
—theme-highlight-red: # eb5368;
—theme-highlight-pink: # df80ff;
/ * Цвета, используемые в графиках, как инструменты производительности. В основном похожи на некоторые цвета «highlight- *». * /
—the-graphs-green: # 70bf53;
—Theme-Graphs-blue: # 46afe3;
—theme-graphs-bluegrey: # 5e88b0;
—the-graphs-purple: # df80ff;
—the-графики-желтые: # d99b28;
—theme-graphs-orange: # d96629;
—the-graphs-red: # eb5368;
— тема-графы-серый: # 757873;
—theme-graphs-full-red: # f00;
—theme-graphs-full-blue: # 00f;
}
Выберите тему и переменные, на которые вы хотите настроить таргетинг, и добавьте их в свой «userChrome.css».
Вот еще несколько скриншотов окна моих инструментов разработчика.
Хотите настроить Chrome DevTools Theme вместо этого? Проверьте этот пост.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)