feat: add dark mode support

[drewcook]

General Changes

• Adds in toggle markup that appears in top right of the header of each page
• Adds in styles for a clean look over the checkbox toggle in global.css
  • Utilizes CSS variables and styles the elements within the #doc container to use these variables for colors
  • There's a separate set for light and dark, which makes it easy to update these for a particular palette
• Adds in support to remember what a user's chosen preferred color scheme is by storing their choice in localStorage
• Adds in a the JavaScript needed to add the interactivity for the toggle switch and the styles
  • Checks localStorage for any previous saved value and applies it if so - defaults to light for new visitors
  • Toggles the global dark class on toggle switch click
  • Updates localStorage with the newly selected value
• Adds in a set of utility classes to use during markdown authoring, primarily for use on images and tables

Notes

I've added in utility classes for images and tables.

• centered for centering all text within a table
• transparent for invisible tables vs the striped style - applied when tables are used for grid layouts
• transparent for images - applied when wanting to preserve a transparent background image - the image will inherit the light/dark mode background color
• padded for images - used to apply 12px of padding around an image to give it more room - great for graphs
• invert for images - used when wanting to completely invert the colors of an image for dark mode

Demo

I've created a version that mimics https://vitalik.ca in dark mode, and additionally have applied these utility classes to the images and tables throughout the posts as outlined in vbuterin/blog#40.

View the demo here.

[owocki]

@drewcook awesome! let me know when i should ping the dark site over to vitalik for review

https://vb-dark-mode.surge.sh/
👀

[owocki]

From Vitalik:

For the diagrams that they filled in with a white background, can they add ~10 pixels of empty space if the diagram goes right up to the edge?

@drewcook

[owocki]

from vitalik:

Just an example of what I mean

thanks!

[Developer-piyush]

@drewcook this really looks awesome and very neat..

Adding 10px padding to img tag globally in css would solve this edge problem.

[drewcook]

@owocki

For the diagrams that they filled in with a white background, can they add ~10 pixels of empty space if the diagram goes right up to the edge?

Rather than cherry-picking what images get padding and which don't, I think a better solution would be to add the padding to all images that appear within the #doc container, and give all images a background color of #fff, maybe even add in a new CSS var for a border around the images, which updates with light/dark - same values as the hr. This would mitigate any issues with the image butting up against the edge and would eliminate the cognitive load of cherry picking which images get the padding or not during markdown authoring.

For comparison, one could use a class around the image to add the padding within the markdown files, but that's not very scalable and requires a bit of cognitive capacity to remember that.

Most images already have the white (or light) background to them already, so it makes sense to equalize them all for those that don't, so that when dark mode is enabled, they all appear consistent.

One additional idea I had was for these specific flow-chart type images as referenced, that the .invert class could be added to those particular images. This circles back to my earlier point around cognitive load of cherry picking, but it could be practiced.

I think the best bang for the buck in this scenario is to just add some slight padding to all the images, give it background white/light, and optionally add a border to the images if desired (enhancement).

I will reach back out and provide an update today after implementing this and publishing it to the demo URL for review.

[drewcook]

@owocki I've added in the image styling support and have re-published to the demo URL. The circuit diagrams look much better now with the additional padding. I've added in the subtle border as well, as it contrasts nicely with the non-white background.

[drewcook]

@owocki I've made one last final update to using a less intrusive sun and moon icons with subtler accent colors for the toggle for each state (open to exact hexadecimal suggestions if desired). I think overall this looks nicer and is cleaner than text. The live demo URL is up to date with these changes. I've opened up the PR for official review now.

[owocki]

@drewcook can you DM me on telegram? i want to introduce you directly to vitalik to reduce the game of telephone (also u should get to know him :) ) i'm owocki there.