Adds dark mode and simplify CSS

[Tpt]

• remove class="box", the code already has a different background color
• remove class="reference" that is unused
• drop the style block that is unused

---

Preview | Diff

[niklasl]

Nice!

FYI, I'm about to add some improved CSS to rdf-common, which I'm trying out on the primer in w3c/rdf-primer#24. (I'm also adding opt-in improved syntax highlighting.)

I don't think this needs much coordination though; in fact, if this PR is merged that makes it simpler for me/us to try out if the upcoming addition to rdf-common looks good (it'll probably be opt-in for clarity). Specifically, the syntax highlighting in user-set light mode will be improved.

[afs]

In light mode, the background grey of boxes is much too close to the page background white.

[Tpt]

In light mode, the background grey of boxes is much too close to the page background white.

Indeed, it's very close. We might customize it but I am slightly afraid it might clash in unexpected ways with syntax highlighting. If you don't think it's a problem, do you have a favorite color?
An other option might be to add a border, but then we also need to pick two colors, one for light and one for dark mode

[afs]

In light mode, the background grey of boxes is much too close to the page background white.

Indeed, it's very close. We might customize it but I am slightly afraid it might clash in unexpected ways with syntax highlighting. If you don't think it's a problem, do you have a favorite color? An other option might be to add a border, but then we also need to pick two colors, one for light and one for dark mode

1. Have a border
2. The background appears to be (250, 250, 250) #FAFAFA so maybe for now #F0F0F0 (240,240,240)

Dark mode is OK-ish for now - the json background is distinct mainly because the main background is hard black rather than a "dim grey" dark mode.

(FWIW: I use github "Dark dimmed" in GH; Hard black is like GH "Dark contrast")

[Tpt]

In light mode, the background grey of boxes is much too close to the page background white.

Indeed, it's very close. We might customize it but I am slightly afraid it might clash in unexpected ways with syntax highlighting. If you don't think it's a problem, do you have a favorite color? An other option might be to add a border, but then we also need to pick two colors, one for light and one for dark mode

1. Have a border

2. The background appears to be (250, 250, 250) #FAFAFA so maybe for now #F0F0F0 (240,240,240)

Make sense! However, should we customize it here or suggest a change to ReSpec? It seems to me it's a ReSpec concern and not something specific to our documents.

[afs]

3.2.2 Encoding RDF terms
https://pr-preview.s3.amazonaws.com/w3c/sparql-results-json/pull/47.html#select-encode-terms

has also changed in light-mode. That did just have borders.

[Tpt]

3.2.2 Encoding RDF terms https://pr-preview.s3.amazonaws.com/w3c/sparql-results-json/pull/47.html#select-encode-terms

has also changed in light-mode. That did just have borders.

Indeed. Fixed. Sorry for missing that.