w3c
feat: support dark mode
Deploy Preview for clreq ready!
| Name | Link |
|---|---|
| Latest commit | 248bff97ad91fc2b7f05f1d137670c0ce3c5fbdd |
| Latest deploy log | https://app.netlify.com/sites/clreq/deploys/66385a93a09ac500082a5bec |
| Deploy Preview | https://deploy-preview-612--clreq.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify site configuration.
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
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 https://github.com/w3c/clreq/blob/60649c5cad7cc804d0979183de3c9da2e7489ae9/local.css#L147-L160 and https://github.com/w3c/clreq/blob/60649c5cad7cc804d0979183de3c9da2e7489ae9/local.css#L59
We also need to make dark mode versions for at least some of the images in the document.
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.
And we also need to update https://github.com/w3c/clreq/blob/7d515699e5d805ddf7183173ab910a1d294ddf65/local.css#L327
I'm wondering if we should just reverse this colour. make the green for Traditional Chinese directly into purple for Traditional Chinese.
Per https://github.com/w3c/respec/pull/4700 , please remove darkMode: true and use:
<meta name="color-scheme" content="light dark">
There are still some problems with manually switching the colour theme. Let’s wait until https://github.com/w3c/respec/issues/4687 is resolved.