Automatic dark mode styling based on visitor OS preference using CSS prefers-color-scheme media query.

Josh Hunt

Huntsman Dark Mode Site Icon

Set separate site icons for light and dark mode based on the visitor’s system theme.

yoren

jtzl

JTZL’s Dark Mode automatically applies dark mode styling to your WordPress site based on your visitors’ operating system preferences. No configuration required – it just works.
Interactive demo: 
https://playground.wordpress.net/?blueprint-url=https://wordpress.org/plugins/wp-json/plugins/v1/plugin/jtzls-dark-mode/blueprint.json
Key Features:
<ul>
<li>Automatic detection using CSS <code>prefers-color-scheme: dark</code> media query</li>
<li>Zero configuration – works out of the box</li>
<li>Privacy-respecting – all detection happens client-side</li>
<li>Theme-agnostic – works with any WordPress theme</li>
<li>Media preservation – images, videos, and embeds display correctly</li>
<li>Developer-friendly – extensible via WordPress filter hooks</li>
</ul>
How It Works:
The plugin uses the CSS <code>prefers-color-scheme</code> media query to detect when a visitor’s operating system is set to dark mode. When detected, dark mode styles are automatically applied without any JavaScript or server-side processing.
Technical Features:
<ul>
<li>Modern PHP 8.2+ architecture with dependency injection (PHP-DI)</li>
<li>Service-oriented design with PSR-4 autoloading</li>
<li>Separate styling strategies for Block themes (CSS variables) and Classic themes (filter inversion)</li>
<li>Comprehensive test coverage with PHPUnit</li>
</ul>
Developer Hooks:
Customize the plugin behavior using these filter hooks:
<ul>
<li><code>jtzl_dark_mode_enabled</code> – Enable/disable dark mode on specific pages</li>
<li><code>jtzl_dark_mode_css_variables</code> – Customize dark mode colors</li>
<li><code>jtzl_dark_mode_custom_css</code> – Add custom CSS rules</li>
</ul>

Alternatives to JTZL's Dark Mode

Top alternatives