dark mode - speced/respec GitHub Wiki
ReSpec supports dark mode for W3C specs via the standard color-scheme meta tag.
<head>
<meta name="color-scheme" content="light dark">
</head>This uses the official W3C dark stylesheet from tr-design and respects the user's prefers-color-scheme preference.
The ReSpec pill includes a dark mode toggle that overrides the system preference. This toggle injects a .darkmode class on <body> via JavaScript.
Because the manual toggle uses a JavaScript-injected class rather than a CSS media query, custom CSS must target both approaches:
/* System preference */
@media (prefers-color-scheme: dark) {
.my-custom-element { background: #1a1a1a; }
}
/* ReSpec manual toggle */
body.darkmode .my-custom-element { background: #1a1a1a; }- Dark mode styles are part of the W3C TR design system — only available for W3C specs
- The
.darkmodeclass limitation is a known architectural issue; the CSSprefers-color-schememedia query does not respond to JS-injected class names - For specs with heavy custom CSS, you will need to duplicate your dark-mode rules to cover both the media query and the
.darkmodeclass