☰

如何找到负责任的样式选择器

tag-icon • tag-icon firefox themes
如何找到负责任的样式选择器

Mozilla Firefox 开发者工具有两个不同的主题，浅色和深色。深色是 Firefox 开发者的默认主题，浅色是普通 Firefox 的默认主题。

我想找到实际的样式表（假设这些样式表是用样式表设计的）来编辑它们。我目前使用的是 Windows，我假设由于我无法在 appData 中找到它们，因此它们一定位于某个我可以使用资源黑客访问的 .exe 或 .dll 中。

答案1

Mozilla 中 DevTools 窗口使用的样式位于omni.ja压缩文件中。
在当前版本的 Firefox 中，有两个 omni.ja 文件：
此 ZIP 文件包含 DevTools 的资源文件：“C:\Program Files\Mozilla Firefox\browser\omni.ja”
此 ZIP 文件包含其他资源文件。DevTools 未使用的：“C:\Program Files\Mozilla Firefox\omni.ja”

资源黑客，无需更改 DLL 或 EXE 文件。omni.ja
是标准 (deflate) ZIP 文件，没有添加签名或其他技巧。
要更改样式，您最感兴趣的是 omni.ja 中的 css 文件。

让我通过一个示例向您展示如何自定义内置主题之一。
在此示例中，我将更改颜色以突出显示 DevTools 的 Inspector/Rules 部分中的标题。
我希望它突出显示，因为我习惯在 DevTools Inspector 中查找 CSS 规则，并且我最感兴趣的是“此元素”的规则。
我很恼火，因为我经常忽略，我已经滚动过了“此元素”进入“继承...”部分。
在深色主题中，它看起来像这样：

在此处输入图片描述

在下面的例子中，我将展示如何将其样式更改为此结果以突出显示部分标题：

在此处输入图片描述

如何找到负责任的样式选择器

您可以逐一浏览 omni.ja 中的 css 文件，并使用 try & error 方法对 css 中的一堆规则进行测试修改，然后查看结果。

但这不是最好的选择，因为 Firefox 中有一个专门用于此目的的出色工具。 浏览器工具箱 - 如何激活和使用它。

然后，你可以在 DevTools 上使用 DevTools 来检查检查器：

在此处输入图片描述

现在我们很快就知道了本例所需的选择器是.ruleview-header，并且它在rules.css文件中定义。
我们也可以点击rules.css直接在 FF 中查看其内容。
这是覆盖规则，它将更改标题的颜色，如上图第二张图所示：

.ruleview-header {
    background: #905252 !important;
    color: white !important;
}

或者遵循与 omni.ja 中的 css 文件中使用的相同方案，这是我在现有 css 文件中修改/添加的内容（我添加的文件在注释中有“added”关键字，我修改的文件有“was:”关键字显示原始值）

/* 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); */
}

修改内容放在哪里

  • 您可以编辑实际的 rules.css 文件并将其打包回 omni.ja 文件，但在 FF 更新后，您的更改将会丢失。
  • 编辑userChrome.css文件并添加它应该在的地方。。在这种情况下，您必须在所有覆盖规则上使用 !important。
  • 使用扩展程序，例如 Stylus
  • 创建您自己的扩展

我认为在大多数情况下，使用userChrome.css文件是最好的选择。

在 Firefox 中直接查看资源文件

可以使用 chrome: 和 resource: 伪协议查看一些文件夹/文件。

皮肤文件夹中的文件，例如：
zip 中的路径： .\chrome\devtools\skin\dark-theme.css
chrome://devtools/skin/dark-theme.css
* 无法列出目录。必须输入包括文件名在内的完整路径

主题文件夹中的文件，例如：
zip 中的路径：\chrome\devtools\modules\devtools\client\themes\variables.css
resource://devtools/client/themes/variables.css
* 也可以列出目录：resource://devtools/client/themes/

更多阅读：

https://stackoverflow.com/a/40793285/3273963
https://stackoverflow.com/questions/34147992/customize-firefox-developer-dev-tools-color-theme
https://stackoverflow.com/questions/47442661/firefox-quantum-developer-tools-theme
https://www.hongkiat.com/blog/personalize-firefox-dev-tools-theme/
https://www.reddit.com/r/firefox/comments/6qalvm/how_to_change_the_developer_tools_dark_theme_back/

相关内容