Match Media Pro

Demo

System dark-mode match:

Explanation #

data-match-media keeps a signal synced with a media query match state. In this example, $isDark tracks prefers-color-scheme: dark and class bindings switch styling.

The query can be written without surrounding quotes or parentheses; the plugin normalizes it before calling window.matchMedia.

For more complex queries, use a quoted query string with explicit media-query syntax and parentheses so the exact browser query is preserved.

Usage Example #

1<div
2    data-match-media:is-dark="prefers-color-scheme: dark"
3    class="match-media-card"
4    data-class:dark="$isDark"
5>
6    <p>System dark-mode match: <code data-text="$isDark"></code></p>
7</div>