如何让黑暗主题的搜索栏结果 [英] How to get dark themed searchbar-results

问题描述

我在MacOS上使用Firefox Developer Edition主题来减少编程时的眼睛疲劳。然而，在位置栏中输入的结果仍会弹出明亮的白色。

有谁知道CSS会让这些结果使用黑色的背景和浅色的文字吗？

解决方案

一般来说，如果您正在寻找一个可以改变这种情况的插件，那么一个主题将是适当的。我使用的主题至少有一个样式是URL Bar的自动完成结果。如果需要，扩展也可以改变样式。然而，考虑到你并不想要一个完全不同的主题，只需对Developer Edition主题进行小小的修改，就可以通过将CSS放置在 userChrome.css 。

要为你自己做，你需要确定合适的元素风格。像往常一样，附加组件

因此，我们可以在配置文件的 userChrome.css ，它需要位于 [profile directory] ​​/ chrome 目录中：
$ b

  / * 
 *编辑这个文件并将其作为userChrome.css复制到你的
 profile-directory / chrome / 
 * / 
 
 / * 
 *此文件可以用来定制Mozilla用户界面的外观
 *您应该考虑使用！重要的规则，您希望
 *覆盖默认设置。 
 * / 
 
 / * 
 *不要删除@namespace行 - 正确运行所需的
 * / 
 / * set default namespace到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; 
 
 
 
 $ b $ p 
 $ b 
这会导致URL栏自动完成，并带有白色文本的黑色背景：
 
 
 
  
 
I am using the Firefox Developer Edition theme on MacOS to reduce eye strain while programming.

However, results while typing in the location bar still pop up bright white.  

Does anyone know of CSS to have these results use a dark background and light text?

解决方案
Generally, if you are looking for an add-on which will change this, then a theme would be appropriate. At least one of the themes I use does style the URL Bar's auto-complete results. An extension could also change the styling, if desired. However, given that you are not wanting a completely different theme, just a minor modification to the Developer Edition theme, it is easier to do this yourself by applying CSS to the profile's chrome by placing the CSS in userChrome.css.

To do it for yourself, you need to determine the appropriate elements to style. As is often the case, the add-ons DOM Inspector combined with Element Inspector are quite useful in determining the appropriate elements to style. With those add-ons installed, opening the auto-complete drop-down and Shift-Right-Click results in seeing the DOM for what we want to change:



Thus, we can put the following in the profile's userChrome.css, which needs to be located in the [profile directory]/chrome directory:
/*
 * 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;
}
This results in the URL Bar auto-complete having a black background with white text:



                        
这篇关于如何让黑暗主题的搜索栏结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！