Support Dark Mode

[arai-a]

This adds dark mode for the spec.

The colors and the variable names are chosen without much consideration, and I'm open to any changes.

There are some issue with the transparent images, such as the ECMA logo.
If there's dark-mode logo or any other solution, let me know.
For other images in figure, I've added always-#fff background color.

[michaelficarra]

We don't have a dark-mode Ecma logo, so for now that'll have to have a light background applied to it as well. My initial reaction is that the main document background is way too dark, creating eye-searing contrast with the body text. Why isn't it a similar tone to the left and bottom panes?

I'd like to see what an accessibility analysis says about this. Can you run Lighthouse (or some other accessibility tool) on the result, or host it on gh-pages so we can do it ourselves?

[arai-a]

We don't have a dark-mode Ecma logo, so for now that'll have to have a light background applied to it as well.

Okay, I've added #fff background to it as well.

My initial reaction is that the main document background is way too dark, creating eye-searing contrast with the body text. Why isn't it a similar tone to the left and bottom panes?

The color was just the opposite of the original color/background-color.
I've made the contrast almost same as GitHub's main text.

I'd like to see what an accessibility analysis says about this. Can you run Lighthouse (or some other accessibility tool) on the result, or host it on gh-pages so we can do it ourselves?

Pushed the output to https://arai-a.github.io/ecmarkup/out/

I'll check the accessibility details.

[arai-a]

I see several issues with the contrast in the accessibility details, such as the parameter with highlight, hljs highlight, note section, etc. I'll address them to match the requirements and post update.

[arai-a]

Fixed colors, so that at WCAG contrast score becomes AAA or AA for the most cases.
Also made the solarized CSS conditionally use the dark mode.

The output is available in: https://arai-a.github.io/ecmarkup/out/

[arai-a]

Lighthouse seems not to be capable of handling the entire ECMAScript spec. It reports the contrast issue but the list is empty.
So I've updated the Ecmarkup document to use the dark mode https://arai-a.github.io/ecmarkup/

The contrast issues are reported only against hljs text (code and commands in pre).
Those texts are now using the colors defined in solarized-dark.min.css instead of solarized-light.min.css, but apparently the color is too dark, in term of the accessibility.
Perhaps we should look for different color scheme for the code?

[arai-a]

Added variant with a11y-dark theme for hljs
https://arai-a.github.io/ecmarkup/index-a11y.html

Lighthouse is still reporting issue with attribute (hljs-attr) color, but there's no other issue.
If this looks okay, I'll modify the patch to use it for dark mode.

[michaelficarra]

LGTM

[arai-a]

Thank you for reviewing!
Can I have your opinion about the hljs text?
https://arai-a.github.io/ecmarkup/ (solarized-dark) vs https://arai-a.github.io/ecmarkup/index-a11y.html (a11y-dark)
The current PR uses solarized-dark.

[michaelficarra]

They're both fine but I guess I would prefer a11y-dark.

edit: screenshots:

• solarized-dark
  
• a11y-dark
  

[arai-a]

Thanks! Applied a11y-dark, and also rebased to latest upstream, and applied the darkmode also to the newly added emu-normative-optional::before.