如何获得深色主题地址栏搜索结果

Question

我在 MacOS 上使用 Firefox Developer Edition 主题来减少编程时的眼睛疲劳。

但是，在地址栏中键入时，结果仍然弹出亮白色。

有谁知道 CSS 让这些结果使用深色背景和浅色文本？

Answer 1

好的，在进行了大量的互联网挖掘之后，我发现可能是唯一的解决方案，但实际上也不是唯一的解决方案。

在撰写本文时，还没有 Plugin/Add-on/Mod 可以更改搜索栏的样式。但是，您可以更改 Firefox 本身的 源代码。从这里开始：Mozilla Dev GUide。主要写在C & C++。我的意思是，真的别无选择。在 Firefox 的深处有一些设置，您实际上可以在其中获得这样的 add-on，但我找不到它。您可以完全关闭搜索栏，以便在按回车键后在 google 上获得结果。

第三种选择是尝试使用其他浏览器。只需检查一下，哪个浏览器允许您设置搜索栏的样式并稍后将所有其他深色主题应用到该浏览器。

希望，我没有让它变得更糟:/

Answer 2

一般来说，如果您正在寻找可以改变这一点的 add-on，那么主题是合适的。至少我使用的主题之一确实为 URL 栏的 auto-complete 结果设置了样式。如果需要，扩展还可以更改样式。但是，鉴于您不想要完全不同的主题，只是对 Developer Edition 主题稍作修改，通过将 CSS 应用到配置文件的 chrome 来更容易自己完成此操作，方法是将 CSS 在 userChrome.css.

要自己动手，您需要确定适合的元素样式。通常情况下，add-ons DOM Inspector combined with Element Inspector 在确定合适的元素样式时非常有用。安装了 add-on 后，打开 auto-complete drop-down 和 Shift-Right-Click 会看到 DOM我们要更改的内容：

因此，我们可以将以下内容放在配置文件的userChrome.css中，它需要位于[配置文件目录]/chrome 目录:

/*
 * Edit this file and copy it as userChrome.css into your
 * profile-directory/chrome/
 */

/*
 * This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to
 * override default settings.
 */

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
/* set default namespace to XUL */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#PopupAutoCompleteRichResult {
    background-color:black !important;
    -moz-border-top-colors:black !important;
    -moz-border-top-colors:black !important;
    -moz-border-left-colors:black !important;
    -moz-border-right-colors:black !important;
}

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    background-color:black !important;
}

#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
/*#PopupAutoCompleteRichResult .ac-url-text,*/
#PopupAutoCompleteRichResult .ac-action-text {
    color:white;
}

这导致 URL 栏 auto-complete 具有黑色背景和白色文本：

如何获得深色主题地址栏搜索结果

How to get dark themed addressbar search-results

css

firefox

firefox-addon

firefox-developer-tools