Dark theme

[xhdix]

Automatic dark mode in Firefox and Chrome. There is also a button to change it in browsers that have this feature disabled, like Tor and Duckduckgo. Notes:

1. it is not complete/perfect.
2. The color scheme is based on https://design.ooni.io/

• [ ] make sure that outreach happens
• [ ] when merging, double check that the publication date is today

[hellais]

Thanks for putting this together!

I think we should do a couple of improvements to it before merging it:

• Is there a way to implement this without using the CSS var property? It doesn't appear to be supported in IE. In general 5% of browsers will break if we use this, see: https://caniuse.com/mdn-css_properties_custom-property_var.
• We should move the dark mode theme switcher into the footer so as to not take up so much space in the navbar
• I think the primary OONI Blue color should be adjusted to be a hint bit darker, like we do on mobile. The specific color code for it is: #056aa6 (see: https://github.com/ooni/probe-android/blob/master/app/src/main/res/values-night/colors.xml)
• Some parts of the website require a bit more tweaking to not break with the darker colors. What follows are screenshots of the pages affected by issues when switching to dark mode:
  • The PGP key in the contact section is not legible:
  • This section in the install page should be inverted in color as well. I would suggest using #495057 and white text
  • The OONI Probe logo in the install page should be the white version:
  • The back button and the website button need to be inverted in colors on the partnership page: )
  • These icons need to be re-exported with the correct alpha layer on them so that they don't lead to the white border around them. Even better perhaps is using in the case of the dark theme the white versions:
  • I am not too convinced about the colors in the test page. I guess if we adjust the base OONI Blue color maybe it's doing to work, but we should verify that too:

[xhdix]

All done, except moving the theme switcher into the footer. I don't know exactly where! (Also, I think, users should be aware of the ability to change the theme before reading, not after.)

Now in IE: (The theme switcher does not work in IE. Do I need to add? The CSS/JS size will be slightly larger.)

I also slightly changed the partner pages just for the dark theme:

• https://deploy-preview-969--ooni.netlify.app/partners
• https://deploy-preview-969--ooni.netlify.app/partners/open-culture-foundation/

I did not have a good editor for SVG, so you need to change the API logos:

• /data/ooni-api.svg
• /data/ooni-api-inverted.svg

Let me know if there is anything I can add or change.

[xhdix]

There are also several images with no background and black text.

I can apply this change:

master.css:937
.blog-post img {
++  background-color: var(--partner-logo-color);
}

Or I can add a background to those images and replace them.

Which do you prefer?

[xhdix]

@hellais, new changes applied, please review.