Dark mode implementation

[vhbui02]

Resolve issue #18.

Light mode	Dark mode

My dark mode implementation is based on 3 techniques, as follows:

1. Using this CSS design pattern to add theme classes and dynamic variables inside main.css whose value is changed based on the changes of prefer-color-scheme: light|dark media query. These variables are referenced in other CSS files.
2. For SVG images that can't be dark-moded using CSS filter:, I've used this approach on W3School to create <picture> wraps around multiple <source media="(prefer-color-scheme: light|dark)" > in index.html.
3. Technique 1 and 2 are OS-level, they applied when system color scheme is changed via OS setting or browser dev tool. Based on someland2's answer on SOF, I've added a toggle button in the playground's header that when clicked can change theme at browser-level.

P/s: I've changed some nitty-gritty stuffs such as padding, margin, copyright year, id name, class name, ... hope it didn't cause much problem :")

P/s 2: There are 2 bugs, 1 at editor.js#L82 and 1 at modal.css#L65

[vhbui02]

That's impossible, I've changed the background color of the outer code snippet.

[alixander]

Would you mind pasting a screenshot of what it looks like locally on this branch on your machine and a screenshot of prod?

[vhbui02]

Local	Prod

[vhbui02]

Ah yes, the shadow and the bold title was something I've changed. My bad. They are changed according to #18's original design.

[vhbui02]

After changes:

Local	Prod

@alixander I don't understand why the latex has two \\ instead of one, although I've checked in snippets.js:

[alixander]

It should be one \, if you check in master, it has the right version

[vhbui02]

It should be one \, if you check in master, it has the right version

Yeah I've changed to one \, but somehow my local doesn't reflect that.

[vhbui02]

Okay, I give up. Maybe this is something that's only happened on my machine only. I will push the code and you can test it on your machine and tell me if there are any differences.

[alixander]

Since the light version changed, I'll have to take some time to incorporate the dark mode implementation without affecting light mode version. Will set aside some time for it after some stuff.

[alixander]

finally picking this back up, sorry for the delay and thanks again for this contribution. continued here: https://github.com/terrastruct/d2-playground/pull/79