Skip to content

dark mode

Jump to bottom Edit New page
Marcos Caceres edited this page Mar 27, 2026 · 3 revisions

Dark mode

ReSpec supports dark mode for W3C specs via the standard color-scheme meta tag.

Enable dark mode support

<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.

Manual toggle

The ReSpec pill includes a dark mode toggle that overrides the system preference. This toggle injects a .darkmode class on <body> via JavaScript.

Writing custom CSS for dark mode

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; }

Notes

  • Dark mode styles are part of the W3C TR design system — only available for W3C specs
  • The .darkmode class limitation is a known architectural issue; the CSS prefers-color-scheme media 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 .darkmode class

💖 Support ReSpec by becoming a sponsor via Open Collective. 💖

✨ View rendered version of this documentation at https://respec.org/docs/ ✨

Guides

Configuration options

W3C Configuration options

Linting rules

Internal properties

Handled by ReSpec for you.

Special <section> IDs

HTML elements

Custom Elements

HTML attributes

CSS Classes

Special properties

Clone this wiki locally