JTZL's Dark Mode

PMF

Does this plugin require any configuration?

No. JTZL’s Dark Mode works automatically without any settings or configuration.

How does dark mode detection work?

The plugin uses the CSS prefers-color-scheme: dark media query, which detects your operating system’s color scheme preference. This is a privacy-respecting, client-side-only approach.

Will this affect my images and videos?

No. The plugin includes media preservation rules that ensure images, videos, iframes, and embedded content display without color distortion.

Can I disable dark mode on specific pages?

Yes. Use the jtzl_dark_mode_enabled filter hook:

add_filter( 'jtzl_dark_mode_enabled', function( $enabled ) {
    if ( is_page( 'landing-page' ) ) {
        return false;
    }
    return $enabled;
} );

Can I customize the dark mode colors?

Yes. Use the jtzl_dark_mode_css_variables filter hook to override default CSS variables:

add_filter( 'jtzl_dark_mode_css_variables', function( $variables ) {
    $variables['--id-bg-primary'] = '#0d1117';
    $variables['--id-text-primary'] = '#f0f0f0';
    return $variables;
} );

Available CSS variables:
* --id-bg-primary – Primary background color
* --id-bg-secondary – Secondary background color
* --id-text-primary – Primary text color
* --id-text-secondary – Secondary text color
* --id-border-color – Border color
* --id-link-color – Link color
* --id-link-hover – Link hover color

Note: CSS variables only apply to Block themes. Classic themes use filter inversion.

Does this work with Full Site Editing (FSE) themes?

Yes. JTZL’s Dark Mode uses different styling strategies optimized for each theme type:

• Block themes (FSE): Uses CSS custom properties for precise color control
• Classic themes: Uses CSS filter inversion for broad compatibility

Both approaches ensure proper dark mode rendering without theme modifications.

Does this affect the WordPress admin area?

No. Dark mode styling is applied only to the public-facing frontend of your site.

Can I add custom CSS rules?

Yes. Use the jtzl_dark_mode_custom_css filter hook:

add_filter( 'jtzl_dark_mode_custom_css', function( $css ) {
    return $css . '@media (prefers-color-scheme: dark) { .my-element { color: #fff; } }';
} );

What are the system requirements?

• PHP 8.2 or higher
• WordPress 6.9 or higher
• Composer (for development only)

Is there an interactive preview?

Yes. Launch a live preview in WordPress Playground:

https://playground.wordpress.net/?blueprint-url=https://wordpress.org/plugins/wp-json/plugins/v1/plugin/jtzls-dark-mode/blueprint.json