1

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?

enter image description here

neurojelly
  • 83
  • 1
  • 1
  • 5
Stefan Lyew
  • 387
  • 2
  • 15

2 Answers2

2

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:

Image of DOM

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:

auto-complete with black background and white text

Makyen
  • 31,849
  • 12
  • 86
  • 121
  • n1, I will do that in my Firefox too now. – Penguin9 Jan 12 '17 at 22:17
  • I got rid of the remaining white border by adding: #PopupAutoCompleteRichResult .autocomplete-richlistbox { background-color: black; } – Stefan Lyew Jan 12 '17 at 23:15
  • 1
    @StefanLyew, I was working on it when you replaced your comment. In my testing that rule needed an `!important`. Based on the initial contents of your comment, I had assumed that you wanted the entire border removed, so I also added rules for `#PopupAutoCompleteRichResult` to get rid of the additional 1px border. The white border is due to padding. An alternate method of removing the border is to remove the padding from `.autocomplete-richlistbox`. – Makyen Jan 12 '17 at 23:27
  • @RaisingAgent, Based on a request from Stefan, this has been updated to remove the white border. – Makyen Jan 12 '17 at 23:28
1

Ok, after doing quite a bit of Internet digging, I found probably the only solution, which also isn't really one.

As of writing this, there is no such Plugin/Add-on/Mod for changing the style of the search bar. However, you could change the source code of Firefox itself. To do so start here: Mozilla Dev GUide. Its mainly written in C & C++. I mean, there really is no option for that. There are settings, somewhere deep down in Firefox, where you can actually get such an add-on, I couldn't find it tho. You can turn off the search bar completely, so you get your results on google, after hitting enter.

A thrid option would be, to try another browser. Just check, which browser allows you to style the search bar and apply all the other Dark Themes to that browser later on.

Hope, I didn't make it worse :/

Penguin9
  • 481
  • 13
  • 23