Инструменты разработчика Mozilla Firefox имеют две разные темы: светлую и темную. Темная тема по умолчанию для разработчика Firefox, светлая тема по умолчанию для обычного Firefox.
Я хотел бы найти реальные таблицы стилей (при условии, что они стилизованы с таблицами стилей) для их редактирования. Я в настоящее время на Windows, и я предполагаю, что, поскольку я не могу найти их в appData, они должны быть в некоторых .exe или .dll, к которым я могу получить доступ, используя хакер ресурсов.
стили для DevTools в Mozilla находятся в ZIP-файле omni.ja
Есть два файла omni.ja:
не этот: "C:\Program Files\Mozilla Firefox\omni.ja"
вот этот: "C:\Program Files\Mozilla Firefox\browser\omni.ja"
не требуется res хакер, это css файлы.
Позвольте мне показать вам пример того, как настроить одну из двух (на данный момент) встроенных тем.
Я использую поиск CSS-правил в DevTools Inspector, но меня больше всего интересуют правила для "This Element". Я часто не понимаю, когда прокручиваю разделы «Унаследованные ...».
Чтобы лучше увидеть заголовок раздела, я изменил его стиль.
Вы можете пойти методом try & error через различные CSS-файлы в omni.ja,
но в Firefox есть отличный инструмент именно для этой цели.
Панель инструментов браузера - как активировать и использовать его.
Затем вы можете использовать DevTools в DevTools для проверки инспектора:
Там вы можете видеть, что это селектор .ruleview-header , который определен в файле rules.css . Вы можете нажать на rules.css чтобы увидеть его содержимое прямо в FF.
Теперь вы можете использовать:
.ruleview-header {
background: #905252 !important;
color: white !important;
}
или следовать тому же стилю, который используется в файлах тем, вот что я использовал:
/* CSS Variables specific to this panel that aren't defined by the themes */
:root {
--rule-header-color: var(--theme-toolbar-color); /* to keep light theme as it was */
}
:root.theme-dark {
/* was: --rule-header-background-color: #222225; */
--rule-header-background-color: #905252 !important;
--rule-header-color: white; /* added */
}
/* Rule View Container */
.ruleview-header {
/* was: color: var(--theme-toolbar-color); */
color: var(--rule-header-color) !important;
}
/* expandable headers will follow the style of .ruleview-header,
but here it can by styled separately */
.ruleview-expandable-header {
/* background-color: YOUR_COLOR !important; */
}
.ruleview-expandable-header:hover {
/* was: background-color: var(--theme-toolbar-background-hover); */
}
Где его поставить
userChrome.css и добавьте его в нужное место . , Не забудьте использовать!важно в этом случае все правила перезаписи.Структура файлов темы в omni.ja:
файлы в папке скина, например:
.\ Хром \ DevTools \ кожа \ темно-theme.css
открыть только для чтения в Firefox: chrome://devtools/skin/dark-theme.css
и файлы в папке тем, например:
.\ Хром \ DevTools \ модули \ DevTools \ клиент \ Themes \ variables.css
Ресурс://devtools/client/themes/variables.css
(примечание: «ресурс:» вместо «хром:»)