Added dark mode to the core spec

[iherman]

I played with this for the core spec. The necessary changes are:

• add a specific meta statement to the header
• added some extra css statements to our common css file, related to the classes we define. It is mostly making sure that the characters are black for a light background.

We can play with a more elaborate change in colours for those entries (caution, explanation, etc), but I think @mattgarrish has more experience in making properly contrasted colours. I did the minimal that worked for me.

I do not think we should merge this PR now, just make it ready to merge. First, we should have all documents prepared to dark mode. Also, we may want to wait until we begin working on the EPUB 3.4 line...

See:

• For EPUB 3.3:
  • Preview
  • Diff

---

Preview | Diff

[iherman]

Actually, I did some more elaborate colour settings in the common.css file. Also checked them for the WAI colour contrast requirements.

[mattgarrish]

Would it make sense to start this off on the notes and then migrate to the rec docs once we're good with it? (Or maybe those don't have the same scale of custom styling?)

[iherman]

Would it make sense to start this off on the notes and then migrate to the rec docs once we're good with it?

I would prefer to change all our publications in a big bang but, pragmatically, doing it first on notes is doable, while doing it on the rec track documents becomes more complicated because it requires a more complicated publication process. So, yours may be the right pragmatic approach...

I actually think that this should be a group decision and not ours as editors. (@wareid @shiestyle something to discuss at a call?)

(Or maybe those don't have the same scale of custom styling?)

I actually did not check that; I do not know whether they all include a reference to custom.css. However, it may not matter: the changes I made on CSS are only of concern for the specific styles introduced in that file. Other than that, the W3C standard environment covers everything; the only thing to be done is to add the <meta> element in the header.

[mattgarrish]

I actually did not check that; I do not know whether they all include a reference to custom.css.

I'm not sure, either. I think, unfortunately, some may inline the custom css even though they don't need it. That's why I'm not sure we could even test all the styling even if the notes purport to use it.

At some point we should try and clean out the unnecessary use of custom styling, and maybe look at ways of optimizing it for the docs that need it. I suspect it's often called on only to get the zebra table styling.

[iherman]

I actually did not check that; I do not know whether they all include a reference to custom.css.

I'm not sure, either. I think, unfortunately, some may inline the custom css even though they don't need it. That's why I'm not sure we could even test all the styling even if the notes purport to use it.

At some point we should try and clean out the unnecessary use of custom styling, and maybe look at ways of optimizing it for the docs that need it. I suspect it's often called on only to get the zebra table styling.

Yep. And we should get all the notes to use the same custom.css rather than have a local copy...

Let us try to get an agreement with the WG about the dark theme (or not) and we can take care of that cleanup at the same time.

[wareid]

Working now on my end!

[wareid]

Just did an additional check as I realized I did not look at the styling for examples and images. It's not converting code samples properly and figures look a bit strange (acceptable but could be better).

[iherman]

The code sample colours are set by the "official" W3C style sheet. I would not change that (just to be consistent with other documents), although, if we want, we can do it.

The official style sheet put the image background to white. I was a bit bothered by this glaring white spot, so I set it to slightly yellowish, but we can change that.

The reason of the white background for the images is that the figures are usually prepared for a white background, and they do not necessarily look good on black background. In the VC WG I spent quite some time on creating images that work on both backgrounds, and it is extremely difficult, so I can see why the choice was to keep it white.