Add dark theme support

[apiraino]

fixes #15

In order to reproduce:

in about:config set:

browser.in-content.dark-mode    true
widget.content.allow-gtk-dark-theme    true
browser.display.use_system_colors    true

and start firefox with GTK_THEME=Adwaita:dark firefox

To test dark theme, add ui.systemUsesDarkTheme=1 in about:config

[maximbaz]

I wonder if this style should be applied globally on body instead? Haven't tested if it will work though.

I think it won't fix #15, it will make the text color readable (which is great!), but #15 is requesting dark theme support (i.e. dark background and white text color).

[apiraino]

@erayd @maximbaz pinging for reviewing the latest changes :-)

[maximbaz]

I am fine with this approach 👍

[apiraino]

@erayd hi, any comment here? :-)

[apiraino]

Ok, I did some research and in 637fb48 there is my proposal for the colors, here's how they look like (on FF).

OTP generated

No token

OTP being clicked

Note: I didn't like how the copy.svg looked too dark on the dark theme so I've copypasted it into something matching the text color. Unfortunately I'm not great with any kind of graphics so the resulting SVG is 2.5x bigger than copy.svg :-) If anyone more skilled can improve on this, that'd be great.

This said, how does it look like?

[apiraino]

@erayd would this PR make it in time before the OTP extension merges into browserpass?

EDIT: if you're interested in what this PR brings but prefer to cherry pick from the commits, feel free to do so 👍

[erayd]

@apiraino The change to Browserpass is imminent - so there's really not much point merging this now I think - but I do like the idea of having it automatically follow the light / dark theme setting of the browser. So let's keep this open, as we may want to bring pieces of it in over there.

If you are curious, the PR for Browserpass is browserpass/browserpass-extension#229.

[apiraino]

@apiraino The change to Browserpass is imminent - so there's really not much point merging this now I think - but I do like the idea of having it automatically follow the light / dark theme setting of the browser. So let's keep this open, as we may want to bring pieces of it in over there.

If you are curious, the PR for Browserpass is browserpass/browserpass-extension#229.

Ah thanks for the link! Good to see it progressing 👍

Then I assume I can live with this a few days more :-)

(hint: strange formatting of the deprecation warning)

[erayd]

@apiraino Thursday 17th.

Wow that looks bad - seems Firefox is being a bit silly with it. I just stuck a 280px min-width on it and tested in Chrome, which was fine... but that is just ridiculous. I should have checked in Firefox as well apparently. I'll roll another release to tidy that up.

[erayd]

@apiraino v0.2.5-dev is now released on the Firefox webstore, with a fixed width.

[apiraino]

@apiraino v0.2.5-dev is now released on the Firefox webstore, with a fixed width.

Looks better now - thanks :-)

For completeness I should have mentioned that I am on Ubuntu 19.x and Firefox 81.0b8

[erayd]

I should have tested it properly first! Thinking "it's just a three-line text notice; testing in Chrome is enough" was clearly sheer hubris on my part.