The plugin leverages the wp_head hook to output a minimal inline stylesheet that sets the initial color scheme based on the visitor's OS preference. This happens before wp_enqueue_scripts fires, so no render-blocking occurs. The OS preference is detected via the prefers-color-scheme media query, which Nexu Eclipse reads using a lightweight JavaScript snippet that runs in the <head> before the closing </head> tag.
How the Toggle Persists Without Cookies
Most dark mode plugins rely on localStorage or cookies to remember user preferences, but Nexu Eclipse uses a hybrid approach. It stores the user's choice in localStorage for client-side persistence and syncs it to the WordPress database via the update_user_meta function. This ensures the preference survives cache clears and works across devices when users are logged in.
The toggle itself is a custom WordPress shortcode [nexu_eclipse_toggle] that can be placed in any widget area or template file. When clicked, it triggers a JavaScript event that updates both localStorage and the server via an AJAX call to admin-ajax.php. The plugin registers this endpoint using wp_ajax_nopriv_ to ensure it works for logged-out visitors.
Image Protection Without CSS Filters
Many dark mode solutions invert images using CSS filters, which distorts colors and reduces clarity. Nexu Eclipse avoids this by dynamically rewriting image URLs to append a ?dark-mode=protected query parameter. The plugin then intercepts these requests using the template_redirect hook and serves the original image without modification. This approach preserves photo accuracy while still applying dark mode to surrounding elements.
For developers who need finer control, Nexu Eclipse exposes a nexu_eclipse_exclusions filter. You can add custom selectors or page IDs to exclude specific elements from dark mode processing:
add_filter('nexu_eclipse_exclusions', function($exclusions) {
$exclusions[] = '.custom-dark-section';
return $exclusions;
});
Performance: Minimal Overhead
The plugin's core JavaScript weighs in at under 5KB (minified) and loads asynchronously with a defer attribute. The critical CSS block is inline but only includes the essential dark mode variables, keeping the initial payload small. Nexu Eclipse also avoids jQuery dependencies, using vanilla JavaScript for all DOM manipulations.
If you're building a theme or plugin that needs to integrate with Nexu Eclipse, the plugin provides a nexu_eclipse_ready JavaScript event. You can listen for it to execute custom dark mode logic:
document.addEventListener('nexu_eclipse_ready', function() {
console.log('Dark mode is fully initialized');
});
For sites using caching plugins, Nexu Eclipse includes a compatibility layer that ensures its critical CSS isn't deferred. It hooks into wp_rockets_buffer (for WP Rocket) and similar filters in other plugins to preserve the inline stylesheet.
The result is a night mode implementation that's fast, reliable, and developer-friendly. If you're tired of FOUC or distorted images in dark mode, Nexu Eclipse handles the edge cases so you don't have to.
Top comments (0)