Implement dark mode

[alphapapa]

See #229.

For better or worse, this branch is based on #230.

This is at an early stage of development.

[netlify]

✅ Deploy Preview for scientific-python-hugo-theme ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	4226f46
🔍 Latest deploy log	https://app.netlify.com/sites/scientific-python-hugo-theme/deploys/6515be85c187180008df823b
😎 Deploy Preview	https://deploy-preview-233--scientific-python-hugo-theme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 95 Accessibility: 98 Best Practices: 100 SEO: 89 PWA: - View the detailed breakdown and full score reports

---

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

[alphapapa]

Hi @stefanv @jarrodmillman,

Here are screenshots of the current state of this branch:

Screenshots (click to expand)

I went with an almost-black background for the dark-mode theme, rather than simply "inverting" the light theme directly. If preferred, though, the dark blue color used in the top and bottom bars could be used for the main content, and those bars could be the almost-black color instead.

This is currently implemented using the CSS @media (prefers-color-scheme: dark) special selector. As discussed, I'll be implementing a manual override that can be activated by clicking a switch on the page. Hopefully that can be integrated while keeping this CSS selector so that users who activate the dark-mode preference in the OS or browser will still have it selected automatically.

Please let me know what you think about the visual design, color choices, etc. Thanks.

[stefanv]

Thanks @alphapapa! As long as the color mapping is easy to change (which it is), we can always tweak that later. I'd probably do away with the glow, but everything else looks good.

A very simple switcher is implemented in https://github.com/scientific-python/scientific-python-hugo-theme/pull/157/files, in case that's useful to look at.

[stefanv]

Many sites (GitHub, e.g.) choose a very dark shade of gray instead of pitch black as the background. Worth playing with?

[stefanv]

@henryiii Jarrod mentioned that this is a needed feature for porting the dev guide to Hugo. Did you want to take a look to see whether this implementation would be sufficient? There's no widget for switching, but it does switch based on the theme preference. See:

https://github.com/scientific-python/scientific-python-hugo-theme/pull/233/files#diff-667066e9990bd098c594509db8ed4b5abf1a2e91e092a748e52be5283286f00eR46

[henryiii]

Jarrod mentioned that this is a needed feature for porting the dev guide to Hugo

Yes, this is the main drawback that I'm aware of for moving over.

There's no widget for switching, but it does switch based on the theme preference

That's fine by me.

FWIW, the shadows on the boxes look bad in the preview, both in dark and especially in light mode.

[jarrodmillman]

Before

After

[jarrodmillman]

I updated the theme for all the websites. We are merging this and will fix it up in follow-up PRs. We won't update the websites until we are ready.

[jarrodmillman]

Before

After

[alphapapa]

@jarrodmillman I think the preview is looking pretty good in dark mode now: https://deploy-preview-233--scientific-python-hugo-theme.netlify.app/

Screenshots

If you agree, feel free to merge. And please let me know if you see any other changes that should be made. Thanks.

[jarrodmillman]

The sidebar in dark mode needs some attention.

Light mode

Dark mode

[stefanv]

Also the glowy boxes on the frontpage, and the mermaid diagrams (in dark mode).

[jarrodmillman]

https://mermaid.js.org/config/theming.html

[jarrodmillman]

Maybe the button should be white (or lightly colored) with dark text in dark mode? And no shadow.

light

dark

[alphapapa]

Rebased on main.

[stefanv]

Thanks, this looks good. The only thing I spotted is that pre blocks flow almost into text:

I think it's just more visible in dark mode, but we can adjust in both light/dark mode (no need to tweak it in only dark mode).

Then, re: the top banner: in light mode, the top menu and the background (behind Scientific Python) are the same color. By changing it, it creates a visual barrier. I prefer the two to be the same, as in this edited example:

[jarrodmillman]

The failure looks like a network issue on netlify. I restarted it and will see if it works.

[jarrodmillman]

https://deploy-preview-233--scientific-python-hugo-theme.netlify.app/

[stefanv]

I spotted one more issue: there's a transition at the bottom of the page which shouldn't be there. The footer color should go to the bottom of the page:

---

---

(Compare with existing https://scientific-python.org/ footer for an example.)

[stefanv]

And then just the pre rendering issue (box running into text) still, and I think we're done.

[alphapapa]

I spotted one more issue: there's a transition at the bottom of the page which shouldn't be there. The footer color should go to the bottom of the page:

(Compare with existing https://scientific-python.org/ footer for an example.)

Hm, this appears to be a matter of how much the page's footer element contains. For example, the https://theme.scientific-python.org/ page, at full width, looks like this right now:

Screenshot

While the https://scientific-python.org/ page looks like this right now:

Screenshot

Fixing that in the theme itself, so that it applies regardless of how large the footer is on the site the theme is applied to, may require some more substantial changes to the CSS or the HTML elements.

[alphapapa]

Here are screenshots of the current state of the PR:

Details

[stefanv]

Good work, thanks!