Add a system for theming, use it to implement dark mode

[jlfwong]

Dark mode:

Light mode:

Fixes #220

[jlfwong]

@evanw whenever you have the chance to try this out, I'm definitely interested in feedback re: contrast & eye strain.

[coveralls]

Coverage decreased (-0.7%) to 47.469% when pulling 7639bc4 on jlfwong/dark-mode into 5f32640 on master.

[evanw]

Thanks so much for working on this! I just tried it out and it looks fantastic. Switching to Speedscope late at night no longer feels like a punch to the eyeballs.

A few things:

• In dark mode, the black bar at the top of the welcome screen no longer stands out, but is also slightly off of the background color. Not sure if that matters to you or not. If it does, I would either make the background black too (remove the bar) or make it dark grey instead of almost black (keep the bar).

• Search results currently stand out much less in dark mode than in light mode. My intuition says that they should stand out about the same amount but obviously it’s just a color preference thing, so feel free to ignore. You can check out my branch for what I thought felt right.

• It sounds like you’re already on to this but switching the system-level dark mode preference breaks the interface. I mention this because I actually do this (usually once or twice a day). Let me know if you want help debugging it.

[jlfwong]

Okay, thanks for the feedback!

RE: title bar in dark mode, I agree it looks a liiitttle bit weird, but I don't think it's a big deal, and changing the color of that one specific thing would require me either introduce a new theme color just to handle that case or have theme-specific logic about hiding backgrounds, which I don't really want. So I'm going to leave that one alone.

RE: search result contrast, I just pushed a new commit to update that. Here's the before & after:

Before	After

Re: system switching, I figured out the bug, so that should be fixed too!

[evanw]

Just gave this a try. The colors look great now!

FWIW I'm seeing Speedscope lag a lot with quite a few copies of this in my console:

Uncaught RangeError: Maximum call stack size exceeded
    at Context.setViewport (graphics.ts:422)
    at Context.resize (graphics.ts:493)
    at GLCanvas.maybeResize (application.tsx:97)
    at CanvasContext.onBeforeFrame (canvas-context.ts:63)
    at graphics.ts:497
    at Set.forEach (<anonymous>)
    at Context.resize (graphics.ts:497)
    at GLCanvas.maybeResize (application.tsx:97)
    at CanvasContext.onBeforeFrame (canvas-context.ts:63)
    at graphics.ts:497

The problem went away when I reverted 2a19c36, which is how I tested the colors. This was tested on master after you landed this PR. Not sure if this is due to me building it incorrectly or not. Just wanted to flag this in case it was real and you were about to do a release without catching this issue.

[bjorn3]

I get the following on speedscope.app.

Uncaught Error: undefined
speedscope.074e1f5c.js:100:1
    _updateRenderTargetAndViewport https://www.speedscope.app/speedscope.074e1f5c.js:100
    clear https://www.speedscope.app/speedscope.074e1f5c.js:100
    onBeforeFrame https://www.speedscope.app/speedscope.074e1f5c.js:114
    resize https://www.speedscope.app/speedscope.074e1f5c.js:100
    forEach self-hosted:4243
    resize https://www.speedscope.app/speedscope.074e1f5c.js:100
    maybeResize https://www.speedscope.app/speedscope.074e1f5c.js:190
[...]
    resize https://www.speedscope.app/speedscope.074e1f5c.js:100
    maybeResize https://www.speedscope.app/speedscope.074e1f5c.js:190
    onBeforeFrame https://www.speedscope.app/speedscope.074e1f5c.js:114
    resize https://www.speedscope.app/speedscope.074e1f5c.js:100
    forEach self-hosted:4243
    resize https://www.speedscope.app/speedscope.074e1f5c.js:100
    maybeResize https://www.speedscope.app/speedscope.074e1f5c.js:190
    onBeforeFrame https://www.speedscope.app/speedscope.074e1f5c.js:114

[jlfwong]

Rats. Looks like I broke this on retina displays somehow. Will try to fix.

[jlfwong]

@evanw @bjorn3 Fixed in 1.12.1, and https://www.speedscope.app/ should be back to functional now on high DPI displays.

[bjorn3]

Thanks! It works now.