Как взломать и персонализировать тему инструментов Firefox для разработчиков

Темы являются личным делом для нас, разработчиков, речь идет не только об украшении редакторов или инструментов. Речь идет о том, чтобы сделать экран, на который мы будем смотреть (не моргая), более сносным, чтобы работать в течение нескольких часов подряд и продуктивно. У Firefox есть две темы для инструментов разработчика: темная и светлая. Оба великолепны, но варианты по-прежнему ограничены без возможности персонализировать их.

Теперь Firefox использует комбинацию XUL и CSS для своего пользовательского интерфейса, что означает, что большая часть его внешнего вида может быть изменена с помощью только CSS. Mozilla предоставляет пользователям возможность настроить внешний вид своих продуктов с помощью файла CSS с именем «userChrome.css». Вы можете добавить собственные правила стилей в этот файл CSS, и это будет отражено в продуктах Mozilla.

В этой статье мы будем использовать этот же CSS-файл для персонализации инструментов разработчика в Firefox.

Во-первых, нам нужно найти этот 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 вместо этого? Проверьте этот пост.