CSS to Color Background of Searched Words?

User Help for Mozilla Firefox
Post Reply
User avatar
zlaer
Posts: 505
Joined: June 29th, 2018, 11:11 am

CSS to Color Background of Searched Words?

Post by zlaer »

Hi guys.. Wanted to know if theres a css that can change the background color of the words that are searched in 'search-as-you-type.' Take a look at the example circled in red in the screen shot. Thanks.

Image

.
User avatar
jscher2000
Posts: 11762
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: CSS to Color Background of Searched Words?

Post by jscher2000 »

Does this still work (I have not tested it):

https://www.reddit.com/r/firefox/commen ... _color_is/
User avatar
dickvl
Posts: 54161
Joined: July 18th, 2005, 3:25 am

Re: CSS to Color Background of Searched Words?

Post by dickvl »

Changing those colors can be difficult because there is code present to ensure proper contrast (this can swap text and background color) and using a dark theme can make things more complicated (on a light background you can use almost all colors).
It is usually the background set via ui.textSelectBackgroundAttention

https://searchfox.org/mozilla-release/s ... ndFeel.cpp
Last edited by dickvl on October 11th, 2020, 2:42 pm, edited 1 time in total.
User avatar
zlaer
Posts: 505
Joined: June 29th, 2018, 11:11 am

Re: CSS to Color Background of Searched Words?

Post by zlaer »

jscher2000 wrote:Does this still work (I have not tested it):

https://www.reddit.com/r/firefox/commen ... _color_is/
Hi jscher. Appreciate the input. Unfortunately the code from link you provided doesnt change the background color. Thanks for trying anyway.
User avatar
zlaer
Posts: 505
Joined: June 29th, 2018, 11:11 am

Re: CSS to Color Background of Searched Words?

Post by zlaer »

dickvl wrote: It is usually the background set via ui.textSelectBackgroundAttention

https://sxr.mozilla.org/mozilla-release ... ndFeel.cpp
Hi. Appreciate the link.. but the link is broken.

I tried 'ui.textSelectBackgroundAttention' which does change the background color but does so randomly as its a shot in the dark trying to find the right hexadecimal color code with a dark background that appeals to me. Sadly I found an adequate color but it will work on sites with light backgrounds while the background color changes to white on sites with light background colors.

It appears that the code adjusts to the website's background color. So basically I'm back to square 1. Wish there were a way to turn off this adjustment and just apply a static background color without it dynamically changing according to a site's background color. If thats possible let me know. Thanks.
User avatar
dickvl
Posts: 54161
Joined: July 18th, 2005, 3:25 am

Re: CSS to Color Background of Searched Words?

Post by dickvl »

Sorry, I tried to convert a DXR link and went wrong.
https://searchfox.org/mozilla-release/s ... ndFeel.cpp
User avatar
zlaer
Posts: 505
Joined: June 29th, 2018, 11:11 am

Re: CSS to Color Background of Searched Words?

Post by zlaer »

dickvl wrote:Sorry, I tried to convert a DXR link and went wrong.
https://searchfox.org/mozilla-release/s ... ndFeel.cpp
Wow.. theres hundreds of lines. Is it possible for you to point me to the right codes? Thanks.
User avatar
dickvl
Posts: 54161
Joined: July 18th, 2005, 3:25 am

Re: CSS to Color Background of Searched Words?

Post by dickvl »

My point is to get a list of ui.text prefs that are used for various cases and search the source code to see what they are about.
https://searchfox.org/mozilla-release/s ... tion&path=
https://searchfox.org/mozilla-release/s ... rFrame.cpp
User avatar
zlaer
Posts: 505
Joined: June 29th, 2018, 11:11 am

Re: CSS to Color Background of Searched Words?

Post by zlaer »

dickvl wrote:My point is to get a list of ui.text prefs that are used for various cases and search the source code to see what they are about.
https://searchfox.org/mozilla-release/s ... tion&path=
https://searchfox.org/mozilla-release/s ... rFrame.cpp
I checked out the links. Maybe you can still help. The line that works for me is "ui.textSelectBackgroundAttention." But you can only apply a few color codes that are darkish but the grand majority of color codes will turn to white background. Do you know any color codes that are dark that actually work?
siffemoz
Posts: 253
Joined: January 29th, 2016, 4:36 pm

Re: CSS to Color Background of Searched Words?

Post by siffemoz »

This works well for me on various color themes:

ui.textHighlightBackground: blue
ui.textHighlightForeground: white
ui.textSelectBackgroundAttention: blue
Post Reply