feat: support dark mode

[kirklin]

Fixes #611

---

Preview | Diff

[netlify]

❌ Deploy Preview for clreq failed.

Name	Link
🔨 Latest commit	08757d4
🔍 Latest deploy log	https://app.netlify.com/projects/clreq/deploys/682bf644e40f320008d75322

[xfq]

Thanks for your PR, @kirklin!

Unfortunately, simply adding darkMode: true is not enough. We need to customize the colors in CSS with @media (prefers-color-scheme: dark) {...} and CSS custom properties, like

clreq/local.css

Lines 147 to 160 in 60649c5

	background-color: #fbc481;
	}
	#langSwitch button:lang(zh-hant) {
	background-color: #9fe19f;
	}
	.translateme, .retranslateme {
	background-color: #F3F3C3;
	background-clip: content-box;
	}
	.checkme {
	background-color: #BBEFFC;

and

clreq/local.css

Line 59 in 60649c5

color: #005a9c;

[xfq]

We also need to make dark mode versions for at least some of the images in the document.

[xfq]

These two colours are too close to each other. The different colours here are to allow people who do not understand Chinese to better distinguish Traditional and Simplified Chinese.

In addition, we need to update

clreq/local.css

Lines 183 to 188 in 7d51569

	.is-multilingual [its-locale-filter-list="zh-hant"] {
	border-color: rgba(64,196,64,.5);
	}
	.is-multilingual [its-locale-filter-list="zh-hans"] {
	border-color: rgba(248,138,5,.5);
	}

to make them consistent.

[xfq]

Personally, I would prefer a darker background, but not strong enough to object this.

[xfq]

Our theme colour, green, will be missing if we invert the images. We'll discuss if we need to fix this in the teleconference.

[xfq]

Thanks for updating the PR! I made some comments.

IMHO we can consider using CSS custom properties (like https://github.com/w3c/bp-i18n-specdev/pull/130/files ), so that when updating the colour, it is easier to remember that we also have a dark theme that needs to be updated.

[xfq]

And we also need to update

clreq/local.css

Line 327 in 7d51569

border-bottom: 1px solid rgba(0, 0, 0, .42);

[kirklin]

I'm wondering if we should just reverse this colour. make the green for Traditional Chinese directly into purple for Traditional Chinese.

[xfq]

Per https://github.com/w3c/respec/pull/4700 , please remove darkMode: true and use:

<meta name="color-scheme" content="light dark">

[xfq]

There are still some problems with manually switching the colour theme. Let’s wait until https://github.com/w3c/respec/issues/4687 is resolved.

[xfq]

per https://www.w3.org/International/i18n-activity/guidelines/editing#darkmode , we should use body.darkmode {} instead of @media (prefers-color-scheme: dark) {}.