Add dark mode option for dashboard

[pllim]

Would be nice if I can toggle dark mode on https://beta.readthedocs.org/dashboard/ . @humitos said I could submit this feature request here. Thank you for your consideration and for this wonderful project!

[humitos]

There are some history context about dark mode on the dashboard in readthedocs/readthedocs.org#3819

[agjohnson]

I had actually experimented with this early on. This is very possible and is somewhere on our dashboard roadmap. We'll be taking on more new feature work later on in the year, so likely considering it then.

Just a note: the issue linked above is actually mostly folks wanting a dark mode on our Sphinx theme and documentation projects, not the dashboard -- it's difficult to communicate the difference there though.

• Dark theme readthedocs.org#3819

On the new dashboard, we're using FomanticUI (SemanticUI), which does not yet have a dark mode theme. This is a big project for FUI:

• Dark Mode fomantic/Fomantic-UI#1424

What I did experiment with early on is switching the elements used in our themes, so a FUI .ui.segment would become a .ui.inverted.segment with a dark mode enabled. This is native FUI, which is nice, but does require some creative solutions in templates or maybe client side.

I was a big fan of the end result though. I think the best way to do this is:

• Add a user profile settings for dark mode with options: enabled, disable, and sync with system. I do not like sync with system as the default option though, this is usually a usability headache for users.
• Unknown right now, but I think we'd have to do the bulk of this in templates. Templates would have a template filter to give something like <div class="ui {% dark_mode "inverted" %} segment %}"></div>.
• Also a guess, but to detect the system preference for sync with system, there is a hack required: CSS property is set on a hidden element when dark mode is preferred, we'd do something to detect if that matches the color scheme displayed, and if mismatching we update the preference, maybe reloading automatically.
• We have to sprinkle inverted on many classes as it doesn't trickle up the DOM

Here's a quick demo of what this ends up looking like:

[pllim]

FWIW default to light mode is probably least surprise to users.

I like that screenshot. Looking forward to it being in production. Thanks!

[flying-sheep]

Defaulting to @media/prefers-color-scheme is definitely the least surprise to users!