JTZL's Dark Mode

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:

• Automatic detection using CSS prefers-color-scheme: dark media query
• Zero configuration – works out of the box
• Privacy-respecting – all detection happens client-side
• Theme-agnostic – works with any WordPress theme
• Media preservation – images, videos, and embeds display correctly
• Developer-friendly – extensible via WordPress filter hooks

How It Works:

The plugin uses the CSS prefers-color-scheme 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:

• Modern PHP 8.2+ architecture with dependency injection (PHP-DI)
• Service-oriented design with PSR-4 autoloading
• Separate styling strategies for Block themes (CSS variables) and Classic themes (filter inversion)
• Comprehensive test coverage with PHPUnit

Developer Hooks:

Customize the plugin behavior using these filter hooks:

• jtzl_dark_mode_enabled – Enable/disable dark mode on specific pages
• jtzl_dark_mode_css_variables – Customize dark mode colors
• jtzl_dark_mode_custom_css – Add custom CSS rules