Enable and fix for dark mode

[alphapapa]

See #707.

• Undo a856374: 5dfb796
• Logos not rendering well in dark mode (scientific domains; sponsorships on About):
  • bbf3708
  • b8a2621
  • ab211a5
• Tabs:
  • "Array libraries" tab: logo images need filtering: 6c78d3b
  • "Data Science", "Machine Learning", "Visualization" tabs: colors need fixing: 6c78d3b
  • "Visualization" tab's images: 5b8a04b
  • Some tabs have a li bullet at the top of their contents: c0d23b7
  • Content top-margin larger for text than images: 1d40832
• Language drop down: wrong color in dark mode (should be fixed in theme?)
  • Fixed in Fix: (bulma.css) .navbar-dropdown background-color scientific-python/scientific-python-hugo-theme#435

[netlify]

✅ Deploy Preview for numpy-org ready!

Name	Link
🔨 Latest commit	1a9fe8d
🔍 Latest deploy log	https://app.netlify.com/sites/numpy-org/deploys/6604408c5c7efc0008195efc
😎 Deploy Preview	https://deploy-preview-708--numpy-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alphapapa]

@stefanv @jarrodmillman Can't request reviews on this repo, so tagging you. Thanks.

[stefanv]

See https://deploy-preview-708--numpy-org.netlify.app/about/; what do we do with those logos?

[alphapapa]

See https://deploy-preview-708--numpy-org.netlify.app/about/; what do we do with those logos?

Apologies, I should have checked the other pages as well.

I think those logos can be decently handled by filters, like the smaller ones on the tab sections. I'll see what I can do.

Marking as a draft until ready for review again. Thanks.

[jarrodmillman]

See #712.

[alphapapa]

Looking at the logos again, as Stefan asked.

Two options come to mind:

1. For ones with poor contrast, we could use a CSS filter to invert the colors. That would likely fix the contrast, although it would, well, invert the colors. :)
2. We could also adjust the background color, or try using a drop-shadow filter, something like that, to gently improve contrast without adjusting the image itself.

By the way, I noticed that the sponsors.html shortcode includes this stylesheet, which isn't functional because it's not in the page header:

numpy.org/layouts/shortcodes/sponsors.html

Lines 16 to 43 in 3c39fcf

	<style>
	.sponsor-images {
	display: flex;
	flex-direction: row;
	max-width: 900px;
	justify-content: center;
	margin: 30px;
	}
	.sponsor-images > a {
	height: 75px;
	width: auto;
	padding: 0 30px;
	margin: 30px 0;
	}
	@media only screen and (max-width: 850px) {
	.sponsor-images {
	flex-direction: column;
	}
	.sponsor-images > img {
	height: auto;
	margin: 30px 0;
	padding: 0;
	}
	}
	</style>

The partners.html file includes one as well:

numpy.org/layouts/shortcodes/partners.html

Lines 13 to 40 in 3c39fcf

	<style>
	.partner-images {
	display: flex;
	flex-direction: row;
	max-width: 900px;
	justify-content: center;
	margin: 30px;
	}
	.partner-images > a {
	height: 75px;
	width: auto;
	padding: 0 30px;
	margin: 30px 0;
	}
	@media only screen and (max-width: 850px) {
	.partner-images {
	flex-direction: column;
	}
	.partner-images > img {
	height: auto;
	margin: 30px 0;
	padding: 0;
	}
	}
	</style>

We should probably replace those with either inline styles on the relevant elements, or generalize them into the page's stylesheet.

@stefanv @jarrodmillman

Please let me know what you'd prefer that I do about them. Thanks.

[stefanv]

Sometimes, images can be used in light and dark mode, but we definitely need the ability to specify different images for each. How about something like this:

<img src="img-dark.png" class="dark-theme"/>
<img src="img-light.png" class="light-theme"/>

Then, in the stylesheet:

html[data-theme="dark"] {
  .light-theme {
    display: none;
  }
}

html[data-theme="light"] {
  .dark-theme {
    display: none;
  }
}

[stefanv]

Re: sponsors.html, it should get its own .css file; or we remove sponsors.html and att it to numpy.org, since I think that's the only place it is being used.

[alphapapa]

Re: sponsors.html, it should get its own .css file; or we remove sponsors.html and att it to numpy.org, since I think that's the only place it is being used.

@stefanv Sorry, I'm not sure what you mean about moving sponsors.html to numpy.org.

[alphapapa]

Sometimes, images can be used in light and dark mode, but we definitely need the ability to specify different images for each. How about something like this:

@Stefan Sure. I think we could also use the picture element to do the same thing without having to add CSS classes. What do you think?

[alphapapa]

Pushed #725 in re #708 (comment)

[jarrodmillman]

The style stuff in the shortcodes appears to be functional to me. It appears in the source file and when you remove the styling from the shortcode the page looks different. For example, with the styling

and without it

So we can probably just leave it as is for now. Or move it.

[alphapapa]

The style stuff in the shortcodes appears to be functional to me. It appears in the source file and when you remove the styling from the shortcode the page looks different. For example, with the styling and without it

So we can probably just leave it as is for now. Or move it.

Hm, ok, according to this, it's not officially supported yet, but unofficially it works.

I'll close #725 then. Thanks.

[stefanv]

Re: picture element + media selectors: I considered that, but we do not merely rely on the browser preference, we also allow setting it, and that appears as a data element on html.

[alphapapa]

I considered that, but we do not merely rely on them preference, we also allow setting it, and that appears as a data element on html.

Thanks.

[jarrodmillman]

Once we get the grid sorted out, maybe these can just be grids of images (i.e., maybe we don't need special roles for sponsors and partners).

[jarrodmillman]

Let's put this on hold for a bit b/c I want to revisit if we can use theme functionality directly.

[jarrodmillman]

See scientific-python/scientific-python-hugo-theme#599 and #746. Still working on things, but there is progress.