feat: dark mode #3236
feat: dark mode #3236
Conversation
|
Do we know what happened to tr-design dark mode proposal? |
|
|
The new stylesheet/js have been merged so it is now possible to enable the dark mode on the specifications by following https://www.w3.org/StyleSheets/TR/2016/README.html#dark |
|
The dark mode stylesheet was deployed about 2 years ago and we had requests from people to add that feature. While editors could include the stylesheet themselves, it might be better to have an option to enable the dark mode which would simply include the stylesheet (https://www.w3.org/StyleSheets/TR/2016/README.html#dark) in the document. |
|
Will add a test too😄 |
There was a problem hiding this comment.
Looks great... the only thing we should fix as a followup is the MDN buttons... but otherwise, looks really good.
The IDL boxes maybe too... they could probably be made a bit more "dark", but they look fine and will definitely do!
Nice one @sidvishnoi
Closes https://github.com/w3c/respec/issues/2651
Disabled by default. Set
respecConfig.darkMode = trueto enable.Please provide feedback if you enable dark mode. You can add
?darkMode=trueto your ReSpec spec URL and toggle dark mode in system/browser to preview without making editorial changes.This gives a "good enough" support for dark mode. Not all styles are perfected yet.
And some styles can't be overridden by the manual theme toggle (they only respect
@media (prefers-color-scheme: dark) {...}).I've tried to use W3C stylesheets's CSS variables wherever possible to avoid this, but at least styles for code syntax highlighting (including WebIDL), and definition panel aren't supported in that theme, so they won't fully respect the manual theme toggle.
If you want to try dark mode before this gets merged (please do, to provide feedback), you can replace the
respec-w3cscript withhttps://deploy-preview-3236--respec-pr.netlify.app/respec-w3c.js:Or, use ReSpec preview (NB: do a hard reload to override service worker there)