added: a dark mode in css for us night dwellers

[ChrisMcKenzie]

This site has been a part of my reference site list for a long time but for me a dark theme user it gets a bit fatiguing so it would be nice to have a simple dark mode. hope it isn't offensive just thought it would be a nice addition.

the colors are based on tokyo_night

[mmcgrana]

In the past I've resisted adding dark mode support because I wasn't a fan of any complexity, but I'm coming around to it, if we do it only in CSS as in this PR.

I think we should iterate on the exact styling:

• The white text on a dark background seems a little to thick to me, especially in the footer where we previously used grey-on-white.
• I'd want to look for a theme that was more black and less purple-oriented. Of the styles here, github-dark and one-dark are the closest to me. I also think I had to tweak various values from the base theme when I did the light styling, but honestly it was so long ago I'm not sure.

If you're up to iterate on the styling per above please give it a shot. I also welcome any other observers to jump in with their own style suggestions.

I can't finalize the style myself right away but I can plan to get to it before too long, in the next week or so.

The CSS file also needs some minor style and consistency tweaks but I'm happy to do that at the end.

Old issues for reference:

• Optional dark theme enabled. #297 (in retrospect this was the right direction!)
• Add toggle theme button to the footer #460 (don't want to add a toggle button)
• Proposal: Adding dark theme #476 (recent proposal / request, mentions github-dark, cc @agilov)
• Add Dark Mode  #491 (user asking about, issue closed out)

[eliben]

Just a quick note that we use the Go package https://github.com/alecthomas/chroma for syntax highlighting now.

It seems to have a style gallery here: https://xyproto.github.io/splash/docs/longer/all.html with at least the github-dark style that @mmcgrana mentioned present

Of course we can customize it at will, I just wanted to make sure we don't get confused by pygments names in case things have deviated

[ChrisMcKenzie]

great feedback I can work on this change tonight.

[ChrisMcKenzie]

ok here is a screen of what I just added, sans purple and tweaks to the
text and github-dark syntax theme.

[mmcgrana]

Thank you @ChrisMcKenzie!

I've built on your PR by further refactoring the code to make it easier for us to reason about light vs dark mode here and in the future. I've also done some further style experiments (see below).

I'd like to let this bake in PR for a bit to see if others have comments on the styling or anything else. I may also want to try more styling variations but this is all I can do today. IMO it's looking promising though!

[mon-jai]

@ChrisMcKenzie's second version looks better to me.

[mmcgrana]

After thinking about it some more, I'm going to go ahead merge the iterated design I had with a few more tweaks.

We probably just all have our slightly different preferences, but fwiw what I'm trying to go for here a) a straight-greyscale background (vs blue or purple tinted) and subdued foreground colors (vs. too bright or neon), as we have in the light style. (Note that the screenshot may look unusually weird to you on GitHub if you have that on dark mode, because of the blue/purple tint on GitHub.)

Anyways part of this change makes it a lot easier for us to change syntax highlighting styles in the future, which I'll be open to doing (for both light and dark mode). Hopefully folks with dark mode enabled on their systems at least find this better than bright white 😎