Add dark mode on SolidJS website

[trivikr]

Is your feature request related to a problem? Please describe.

The website https://www.solidjs.com/ does not have a dark mode.

Describe the solution you'd like

• Add dark mode for the website.
• Automatically load a dark or light theme based on system preferences.
• Allow the user to manually override their preference using a toggle in the title/navigation bar, and maintain preferred theme between page reloads.

Describe alternatives you've considered

• Reduce brightness of the screen while reading SolidJS website.
• Use a browser extension to enforce dark mode on the website.
• Revisit the website in the mornings when system has light mode enabled.

[trivikr]

Tailwind CSS includes a dark variant that allows styling site differently when dark mode is enabled.

[trivikr]

cc @amoutonbrady for comments, as they have been active in this repo.

[trivikr]

Solid playground already has a dark mode.

Screen recording

solid-playground-dark-mode.mov

It was added in solidjs/solid-playground#47
cc @aquaductape who added dark mode to the Playground for comments.

[davedbase]

Yup I'd love to add this to the Solid website for consistency with Playground. We'd happily accept a PR to make it functional. I'd then likely be somewhat picky about colours and proper use of branded assets but the first step is to get the button in place and working with the Tailwind dark variant.