Create Dark Mode theme

[robovoice1]

Switch your mobile browser to darkmode. Log in to your sc account. See pic 2. When logged into sc website, see pic1.

In both cases the mozilla logo cannot be read.

Pixel 6 pro Android 12 GrapheneOS (latest beta channel) Bromite mobile android browser 99.0.4844.77

This also is the case for cv website (moz logo and parts of robot avatar), which i filed here https://github.com/common-voice/common-voice/issues/3644

[MichaelKohler]

How did you enable dark mode?

[robovoice1]

In Bromite options and also in grapheneOS

[robovoice1]

Also an option in Bromite settings/design

[HarikalarKutusu]

These might help:

https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript https://www.hanselman.com/blog/how-to-detect-if-the-users-os-prefers-dark-mode-and-change-your-site-with-css-and-js

https://caniuse.com/?search=prefers-color-scheme

[HarikalarKutusu]

Or just a simple trick thou quick and dirty...

<a href="#/en/" style="background-color: #f0f0f0;">
  <img src="https://commonvoice.mozilla.org/sentence-collector/fc9605a3cf4940476f316f8333623785.svg">
</a>

[MichaelKohler]

While Bromite seems to set prefers-color-scheme correctly, that can't be used for a fix. While it then would show correctly in Bromite, it would be wrong in any other browser that doesn't apply dark theme to websites by itself, as it would have the white logo on white background.

The only actual fix I see is actually supporting a dark mode on Sentence Collector. Therefore I'm renaming this issue and mark it as "help wanted". If anyone wants to come up with a dark mode theme (please keep it simple!), I'd be happy to accept a PR.

@robovoice1 the second screenshot shows auth0.com, I'm not sure how much that can actually be customized by Mozilla.

[robovoice1]

Thanks for the info. Could a redesign and swap of the moz://a banner (viewable in dark/normal mode) be an option? But you are right, this would be " nice to have", but not really a must have.

[HarikalarKutusu]

While it then would show correctly in Bromite, it would be wrong in any other browser that doesn't apply dark theme

A common technique we use for these cases is to check the flag and show an alternate logo image, which would be the negative logo, it can be another image or you can serve the SVG from the app and change the color. These monochromatic logos exist for such purposes when corporate identity designs are formed.

I don't see any reason for dark mode implementation if other parts are working OK (which I didn't check).

[HarikalarKutusu]

Check the dark one under the "background colors" section in this link. CV does not have its own identity AFAIK, but it is adaptable.

https://mozilla.design/mozilla/logo-usage/

[robovoice1]

Latest Firefox nightly android with Dark Reader add on.

[HarikalarKutusu]

This is CV's Logo component:

https://github.com/common-voice/common-voice/blob/a72fee0562582ecec27e4c48c4a6b0d157db08ee/web/src/components/layout/logo.tsx

It is used twice on the layout, one without "reverse" at the header, the other with "reverse" at the footer. I think it can be borrowed :)

[MichaelKohler]

Thanks for the screenshot, @robovoice1. Looks like Dark Reader add-on does very interesting things, including manipulating images on their own to invert the colors. Looks like that algorithm is better than what Bromite does.

However, in none of these cases anything is done by the website. This is all done either in the browser (case of Bromite) or in the add-on (Dark Reader).

A common technique we use for these cases is to check the flag and show an alternate logo image, which would be the negative logo, it can be another image or you can serve the SVG from the app and change the color. These monochromatic logos exist for such purposes when corporate identity designs are formed.

I don't see any reason for dark mode implementation if other parts are working OK (which I didn't check).

Yes, that would be the approach when a website wants to support dark mode. However currently Sentence Collector does not support anything at all. The rest is only working because of what the features/add-ons do.

If we would only "fix" the logo, we would end up in the following case:

• For users of add-ons or browser functionality that automatically inverts colors it would be fixed (for example the issue in Bromite)
• For anyone without that functionality or addons, and a light theme preference, nothing would change
• However for users with a dark theme preference, the only thing changing would be the logo. It would now show the inverted image on a white background, making it white-on-white. Only the logo would react to the dark preference, nothing else.

I hope that makes sense?

I agree that for the implementation of dark mode, the inverted SVG could be borrowed from Common Voice.

[MichaelKohler]

Thanks for bringing this up. The Sentence Collector now has moved to https://commonvoice.mozilla.org/write and therefore is now hosted in the main Common Voice repository.