Show dark or light screenshot for address bar search

[rugk]

In the settings:

Currently we show a screenshot for the dark version.
IMHO, the screenshot shown should be dependent on whether the user (likely) uses a dark Firefox/OS theme or a light one.

Tip: use https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme and https://developer.mozilla.org/docs/Web/API/Window/matchMedia

[silvererudite]

Hi...i would like to take a shot on this pls.

[rugk]

Okay, feel free to take this. 😃

[silvererudite]

hey @rugk would you please tell me how I actually use this search bar feature to reproduce the issue ?

Also, where is this screenshot shown to the user ?because I see there's a separate folder of screenshots in the repo. I don't understand where I actually do the work as i can't find the relevant files or place to work on.
Hope you understand my confusion.

[rugk]

Sure, no problem.
First of all, this feature is not released yet, i.e. in the master branch, see the whole project status: https://github.com/rugk/awesome-emoji-picker/projects/2

Thus, you need use the master branch.
To test out the code, you need to clone the repo locally (with git submodules) and load it into Firefox. Fortunately, that is quite easy without having to install additional tools. In the contributing guide, you can see how to do that.

Then you'll find that feature in the settings of the add-on. I'd suggest you to play around with it a little and see what it does. 😃

[rugk]

The places to work on are the options (it's a dir) and there you can also find the image in the img dir.

@silvererudite If you need any pointers/help or have questions, feel free to ask.

[silvererudite]

@rugk sorry haven't been much active. I do understand now what needs to be done but need a slight clarification. Do we change the screenshots based on users' browser preference or his OS preference? The CSS property preferes-color-scheme only detects the users' preference on OS not the theme set on browser.

[rugk]

Yes, for technical reasons we can only detect/change this based on the OS preference, because of the reasons you've mentioned. I guess, there is just no other way, so just do it in this way. 😃

[silvererudite]

@rugk actually there is a way to detect theme on Firefox browser. Check out this the Firefox's theme Api for addons would you like me to try sth with this( if you think it's suitable for your project)?

I can ofcourse do it for the OS preference. I'm saying so because to me OS preference seems not so integral when it comes to browser addons. But that's just my opinion, would love to have your perspective on this.

[rugk]

I think this does not work for the built-in themes and you also hardly can detect whether the theme you get back there is actually dark or light. I've asked this in the forums before.

[silvererudite]

oh...didn't thjnk of that issue. Thanks for pointing that out.

[rugk]

BTW, also feel free to make a better screenshot of the current English thing there. 😄

E.g. the back button at the left is cropped, this is not so nice.

Just make sure to use the same search, because the alt text is used for the image. 😄

[rugk]

Fixed by #65