JTZL's Dark Mode

FAQ

Does this plugin require any configuration?

No. JTZLÌtumọ̀ Yorùbá: ’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Ìtumọ̀ Yorùbá: ’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 Ìtumọ̀ Yorùbá: – Primary background color
* --id-bg-secondary Ìtumọ̀ Yorùbá: – Secondary background color
* --id-text-primary Ìtumọ̀ Yorùbá: – Primary text color
* --id-text-secondary Ìtumọ̀ Yorùbá: – Secondary text color
* --id-border-color Ìtumọ̀ Yorùbá: – Border color
* --id-link-color Ìtumọ̀ Yorùbá: – Link color
* --id-link-hover Ìtumọ̀ Yorùbá: – 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Ìtumọ̀ Yorùbá: ’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