How to add color or change background color on match after the search with / ??

[Goku-San]

Hello, just wanted to say nice extension.

Like the question states... This is similar to #271

The problem:
I use firefox with dark mode on. When I search for a word with / and hit Enter the background color is #ff9632 and remains the same after every next n key press,
while the letters are unreadable because the color is #ffffff.
Also the color sometimes changes to green on first Enter hit.

What I tried

/* #find */ 
::selection { color: #000000 !important; }

/* #find:host */ 
::selection {color: #000000 !important; }

/* :host */ 
::selection {color: #000000 !important; }

/* #ui */ 
::selection {color: #000000 !important; }

Even tried to hard code it in the extension, but firefox disabled it afterwards, so I had to reinstall.

Can you hard code color white so :selection or is there a way for me to achieve that through settings ??

EDIT Current Firefox version 94.0

[gdh1995]

This should work:

/* #find:host */
::selection {color: #000000 !important; }

During my tests, it works on Vimium C Options page, MS Edge 95 and Win 10. Whenever you change selection color or background color, you need to change the query on Find HUD to tell your browser to redraw the selection area.

[gdh1995]

Um, there's a small issue about live preview for #find:host section - if there's no such a section, and you add it and want to see effects, then you need to exit FindMode and re-enter it.

[Goku-San]

you need to change the query on Find HUD to tell your browser to redraw the selection area.

How do I do this ??

After first match I press Esc and again n nothing is changed. Same colors...

[gdh1995]

Um, up to now #find:host is not used by performFind, but only enterFindMode.

[gdh1995]

Then I'll fix it.

[Goku-San]

When I open shadow-root the first line is

<style type="text/css">::selection { background: #ff9632 !important; }</style>

The color is never added , and I can't find the color that I have added... Now I am trying to some how change the colors to see if it reflects in the UI somehow.
It would be nice if you could add some class to it or something so it can be targeted easily.

[gdh1995]

If you have: entered FindMode and searched for some words, and the words have matched at least once, then you'll see #find:host string (along with some pre-defined rules) as the last child element of the shadow root. If you can't find the new node, then maybe there's another bug.

I think there should be another section, maybe named #find:selection to support adding rules into the first <style>.

[gdh1995]

A correct result should look like:

<div>
  <!-- shadow root -->
  <style type="text/css">::selection { background: #ff9632 !important; }</style>
  <style type="text/css">html, body, * { user-select: auto; } ::selection { color: red !important }</style>
</div>

[Goku-San]

Nope I don't have that. Tried in google-chrome (current version 95.0.4638.69 ) as well same thing.

Just to be clear after every change I restart the browser to be on the safe side.

[gdh1995]

What's your "custom CSS" (the whole text)? What're your Vimium C version and OS name?

[Goku-San]

Custom Css

/* #find:host */
::selection { color: #000000 !important; }

Vimium C 1.94.0, Firefox 94, Linux.

OS Manjaro XFCE

[Goku-San]

This is the workflow
press / search for the word, the first match is background: orange, color: black
press Enter the search box closes the matched word changes background: orange, color: white
press n go to next match background: orange, color: white

[gdh1995]

Um, here's my test on Windows 10. I'll test on Ubuntu 20.04 in a while.

[gdh1995]

Oh. Please not press enter - FindMode should be kept active in order to apply #find:host styles.

[Goku-San]

How do I traverse then and keep the styles ?

[gdh1995]

What do you mean by "keep" and "the styles"? If you want to edit the first <style>, then you need to wait for a future version of Vimium C.

[Goku-San]

Am If I don't press Enter how will I traverse to the next match ?

What do you mean by "keep" and "the styles"?

I mean I would like to traverse to next match while background is orange and color is black.

[gdh1995]

When Find HUD is focused, you may use <c-j> and <c-k> to go to a next / previous match.

[Goku-San]

you may use <c-j> and <c-k> to go to a next / previous match.

Thanks, this works. But its easier with n and N

If you want to edit the first <style>, then you need to wait for a future version of Vimium C.

I really hope you implement this. I look forward to the next version.

Thanks for Your time.
Wish You all the best.
Cheers...

[gdh1995]

Hello, on Firefox Add-Ons Vimium C v1.95.0 has been released, and then you may use #find:selection to change the colors.

[Goku-San]

Thanks... Just updated and it works great.

Cheers...