feat: New Dark Scheme Part 2

[alifafaruk]

Dark mode support fixes #2407

@lucasortizny @Jen-Lopez and I worked on the dark mode feature for the website. We implemented a toggle button, where the user can turn dark mode on/off. We did a pull request earlier, but it had multiple merge conflicts that we weren't able to fix. So we closed that. We fixed the issues on our end and now it works!

[stephanegigandet]

Hi @alifafaruk ! Thank you for the PR!

The dark mode looks very good, but instead of adding a site specific toggle, I think it would make much more sense to just use the CSS prefers-color-scheme, as @teolemon suggested in the bug #2407

That way we can avoid the 2 javascript scripts that will block the page rendering for all users until they load, and we can have a pure CSS solution.

Also it would be great to put the CSS styles inside the SCSS ( in the /scss/ directory) so that they get processed along with the rest of the CSS styles.

cc @hangy

[teolemon]

Here's the Open Food Facts logo in dark mode: https://github.com/openfoodfacts/openfoodfacts-server/blob/3d1a30516a663d1dedad0733fac66d9d93a249c8/html/images/misc/openfoodfacts-logo-no-tagline-dark-mode.svg

[GendelfLugansk]

It seems like prefers-color-scheme requires user to activate dark theme on OS level. Correct me if I'm wrong. In this case I'm not sure if it's better

cc @stephanegigandet @teolemon @hangy

[GendelfLugansk]

Red text on blue buttons is hard to read, imo. At least on my screen

White text like this is probably a bit too bright. It can bee seen in right sidebar and on some pages with text (like Contribute and Discover)

That black text (if user is logged in) is barely visible

This block on the right on category page

Some text on product page is black and unreadable

Nutrition table on the same product page is light. Not critical but could be darker, imo

In footer, black text

Many regions of product edit page are too light-colored, imo

On Graphs and Maps page, graph has white background

[GendelfLugansk]

Also, it seems like it might be possible to share "dark mode" setting across different domains but this might be complex to implement. I think that would require changes to perl code, docker config and nginx/apache config on production site. I don't have perl expertise to give more detailed advice.

[hangy]

It seems like prefers-color-scheme requires user to activate dark theme on OS level. Correct me if I'm wrong. In this case I'm not sure if it's better

It sounds like a good idea to default to the dark mode, if someone has selected it, though. This guide explains that the media query can also be done from JS.

Also, it seems like it might be possible to share "dark mode" setting across different domains but this might be complex to implement. I think that would require changes to perl code, docker config and nginx/apache config on production site.

Changing some JavaScript should suffice, if I understand the blog post correctly. However, I wonder if we need localStorage for this. To no waste too much cookie storage, one could just set a d=1 cookie to store enabled/changed dark mode setting in a cross-subdomain cookie.

[stephanegigandet]

It seems like prefers-color-scheme requires user to activate dark theme on OS level. Correct me if I'm wrong. In this case I'm not sure if it's better

I don't know either. Is there some research on dark mode users? Do they turn it on or off depending on ambient light? Does it make sense to turn it on and off depending on the web sites users visit?

I was under the impression that it was more of a "global" preference that is valid accross sites and times: you either want dark mode all the time, or you don't. So you set it once in the OS preference, and then hopefully web sites have styles that match your preference.

[GendelfLugansk]

I was under the impression that it was more of a "global" preference that is valid accross sites and times: you either want dark mode all the time, or you don't. So you set it once in the OS preference, and then hopefully web sites have styles that match your preference.

The thing is, when I google "Chrome dark mode", I see this article which implies that dark mode is supported only in Win 10+ and MacOS 10.14+. As Ubuntu 18.04 user, I don't think I can enable it. So for various Linux users toggle might be useful. Toggle can be combined with prefers-color-scheme, as was suggested above

[VaiTon]

The thing is, when I google "Chrome dark mode", I see this article which implies that dark mode is supported only in Win 10+ and MacOS 10.14+. As Ubuntu 18.04 user, I don't think I can enable it. So for various Linux users toggle might be useful. Toggle can be combined with prefers-color-scheme, as was suggested above

I agree. Other sites (eg. stackoverflow, youtube, etc.) are using a site-specific switch and eventually we could add the "system settings" one.

[alifafaruk]

Hi all! Thank you for taking the time to look into the pull request. My group (@Jen-Lopez and @lucasortizny) and I are new to web development and are unfamiliar with the mechanics of how to implement a prefers-color-scheme. We will be fixing the CSS to fix the bugs.

[stephanegigandet]

Hi Everyone, just wondering if there is still some work being done / to do on this PR?

[teolemon]

poke @alifafaruk @VaiTon

[VaiTon]

poke @alifafaruk @VaiTon

Cannot push to branch :)

[alifafaruk]

Hi, we fixed all the style changes requested for dark mode. We also fixed bugs that were present. However, we don't know how to implement "prefers-color-scheme," so the method used to implement dark mode is still a toggle. If someone could help us change it to a "prefers-color-scheme" method, that would be great!

[GendelfLugansk]

This is still an issue: "Android apk" is still unreadable: Not sure about this wide border around each tag (if others are ok with it, it's fine with me): This is still an issue (go to "Charts and maps", choose "Energy" for horizontal axis and click "generate graph"):

[GendelfLugansk]

@alifafaruk

Please make these requested changes:

https://github.com/openfoodfacts/openfoodfacts-server/pull/3317#pullrequestreview-404621626 https://github.com/openfoodfacts/openfoodfacts-server/pull/3317#pullrequestreview-404634024 https://github.com/openfoodfacts/openfoodfacts-server/pull/3317#pullrequestreview-422133026

Also, please look at these screenshots: https://github.com/openfoodfacts/openfoodfacts-server/pull/3317#issuecomment-637064818

[teolemon]

I created an APK logo in line with the others: https://github.com/openfoodfacts/openfoodfacts-server/pull/3535/files?short_path=67a224e#diff-67a224e98ae5f4a0802aeac7113905f3

[Jen-Lopez]

Hi! Thank you all for the suggestions. I tried making the JS work but I also agree that some browsers may have javascript disabled and by default, dark mode would be enabled (which is something that shouldn't happen). I tried adding the disabled = "true" (request) to the dark mode stylesheet but it didn't seem to work on my end (dark mode stopped working completely). I looked into the prefers-color-scheme and it seems that most apps and websites are using something similar to implement a dark mode feature nowadays. Although the prefers-color-scheme is not compatible with some browsers and is based on system preferences, I still think it's a good and efficient way for dark mode implementation without disrupting the original stylesheet (and with no glitches). @alifafaruk and I are still in the process of making changes but the recent commit implements the prefers-color-scheme suggested previously, with JS removed.

[teolemon]

Good news, the dark mode compatible APK logo is merged, and available in prod

[Jen-Lopez]

I fixed the "Edit a Product" Page and went throughout the site to fix more css bugs. Since the new Android image is available in production and is dark mode aware, this issue should be resolved. However, I was unable to fix the floating WebLinks block in "dairies" since there is no id/class associated with it to change the styling. What page should I look at to add an ID to the element? Also, if there are any changes to be made or any suggestions, please let me know.

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

No Coverage information
0.0% Duplication

[teolemon]

This PR has merge conflicts.

[CloCkWeRX]

TODO items

• [ ] Android APK - Anyone able to do a revised version of https://static.openfoodfacts.org/images/misc/android-apk.svg ?
• [ ] Weblinks - is this just https://github.com/openfoodfacts/openfoodfacts-server/blob/ec77a782631701af3db2aa799789214b7e5a2cce/lib/ProductOpener/Display.pm#L3255 with inline styles that should be pulled up to a main stylesheet?
• [ ] Tabs - ```ul.tabs { border-top: 1px solid #ccc; background-color: #efefef; }```` ?

[CloCkWeRX]

Did a dark friendly (and light friendly) revamp of the logo

[teolemon]

We just deployed a new design, but without dark mode so far.

[stephanegigandet]

We deployed a redesign of the https://world.openfoodfacts.org website, so sadly we won't be able to deploy this PR. Sorry about that and thank you for your work @alifafaruk @lucasortizny and @Jen-Lopez .