Add mode switcher & dark DocFx theme

[perlun]

steffen-wilke/darkfx#1 should have the info required to implement this.

[perlun]

This has been mostly accomplished as of #175 being merged yesterday, but there are still some issues to sort out before we can consider this closed:

• The .js improvements (to detect browser preferences) should be upstreamed to https://github.com/perlun/darkerfx properly.
• A UI glitch in the show/hide TOC can be seen on mobile when dark mode is enabled (screenshot below)
• There is currently no way to access the "theme switch" on mobile devices. This should be fixed. We can check how docs.microsoft.com has done it.

Problems with font size being too big

I also found another slight "issue", not particularly related to the mode switcher but to the increased font size (changed in c5c0dac). It doesn't look particularly good now on "low-DPI" monitors, such as the FHD 23" screen I have here connected to our desktop machine here in my home. I looked into this, but it's a particularly tricky problem to solve, since Firefox reports 96dpi on both that machine and on the laptop where I'm writing this. This is of course completely untrue since one is a 23" screen and the other a 309mm x 174mm laptop screen. 1920 / (30.9 / 2.54) gives me a horizontal DPI of about 158 for this laptop monitor.

Given the complexity in solving this, I think we'll live with this for the time being. 😬

[perlun]

The .js improvements (to detect browser preferences) should be upstreamed to https://github.com/perlun/darkerfx properly.

Fixed in perlun/darkerfx@5bd8d97

A UI glitch in the show/hide TOC can be seen on mobile when dark mode is enabled (screenshot below)

This bug is btw also present in darkfx, so we could at the very least submit an issue to them about it at some point. Not yet fixed but I've started looking into it.

I also found another horribly looking bug, only visible on mobile. If you click Show / Hide Table of Contents one or more times, you can run into this:

[perlun]

I also found another horribly looking bug, only visible on mobile. If you click Show / Hide Table of Contents one or more times, you can run into this:

Not reproducible on iOS with a "real" mobile device, only with iPhone simulator in Firefox DevTools. Ignoring this bug for now as long as we cannot reproduce it on mobile.

[perlun]

A UI glitch in the show/hide TOC can be seen on mobile when dark mode is enabled (screenshot below)

Fixed in #176; upstreamed to darkerfx in perlun/darkerfx#2

This bug is btw also present in darkfx, so we could at the very least submit an issue to them about it at some point. Not yet fixed but I've started looking into it.

steffen-wilke/darkfx#9

There is currently no way to access the "theme switch" on mobile devices. This should be fixed. We can check how docs.microsoft.com has done it.

This seems to be a known issue upstream btw: steffen-wilke/darkfx#5

[perlun]

There is currently no way to access the "theme switch" on mobile devices. This should be fixed. We can check how docs.microsoft.com has done it.

On second thought, this is not something that seems to be universally present. Here are my current findings:

• https://docs.microsoft.com does indeed have it. The theme switcher is located at the very bottom of the screen.
• https://docs.docker.com does not allow the user to manually select the theme. Instead, it seems to rely on media-matching (much like we do it). Also, I realized mobile browsers typically allow the user to flip between night mode and daylight mode; at least Firefox has this feature on iOS. (Safari does not seem to have it.)

Bottom line

I'm not in any way against adding this feature, I just don't want to spend my own precious time on it. I'll file a follow-up issue about it, outlining the details if someone is interested in picking it up: #177.

I'll consider this issue completed now, closing issue.