How to get dark themed addressbar search-results - css

Question

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?

Answer 1

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:

Answer 2

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 :/