Как взломать и персонализировать тему инструментов Firefox для разработчиков
Темы являются личным делом для нас, разработчиков, речь идет не только об украшении редакторов или инструментов. Речь идет о том, чтобы сделать экран, на который мы будем смотреть (не моргая), более сносным для работы в течение нескольких часов подряд и продуктивно. В Firefox есть две темы для инструментов разработчика: темная и светлая. Оба великолепны, но варианты по-прежнему ограничены без возможности персонализировать их.
Теперь Firefox использует комбинацию XUL и CSS для своего пользовательского интерфейса, что означает, что большая часть его внешнего вида может быть изменена с помощью только CSS. Mozilla предоставляет пользователям возможность настроить внешний вид своих продуктов с помощью файла CSS с именем «userChrome.css». Вы можете добавить пользовательские правила стиля в этот файл CSS и это отразится на продуктах Mozilla.
В этом посте мы будем использовать этот же CSS-файл для персонализации инструментов разработчика в Firefox..
Во-первых, нам нужно найти этот CSS-файл или создать его и поместить в нужное место. Один быстрый способ найти папку, в которой будет находиться «userChrome.css» - это перейти о: поддержка в браузере и нажав кнопку «Показать папку» рядом с надписью «Папка профиля». Это откроет папку текущего профиля 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 расширение до .застежка-молния и используйте встроенную утилиту извлечения Windows Explorer, чтобы выгрузить файлы внутри нее. В OSX перейдите в Терминал и запустите разархивировать omni.ja. Имейте в виду, чтобы сделать копию файла в другом каталоге, прежде чем делать это.
Как только файл omni.ja будет извлечен, вы можете найти файл по адресу /chrome/devtools/skin/variables.css; да, обложка Firefox DevTools находится в папке с именем хром. в 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; - тема-цвет тела: # 18191а; --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; --the-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f; : root.theme-dark --theme-body-background: # 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; --theme-graphs-purple: # df80ff; -theme-graphs-yellow: # d99b28; --theme-graphs-orange: # d96629; --the-graphs-red: # eb5368; - тема-графы-серый: # 757873; --the-graphs-full-red: # f00; --theme-graphs-full-blue: # 00f;
Выберите тему и переменные, на которые вы хотите настроить таргетинг, и добавьте их в свой «userChrome.css»..
Вот еще несколько скриншотов окна моих инструментов разработчика.
