Quick Setup Tutorial & Hands-On Guide
Step-by-Step Tutorial: Setting Up a
Smart Night Mode Toggle in 3 Minutes
No developer skills required. Install, configure the essentials, and have a fully working flash-free night mode toggle live on your WordPress site — faster than you expect.
8 min read
Updated 2026
Beginner-Friendly
You do not need to be a developer to set up a professional night mode toggle on your WordPress site. You do not need to edit theme files, write CSS, or understand how browsers render pages. What you need is the right plugin — one that handles the technical complexity correctly by design — and about three minutes of your time.
This tutorial walks you through the complete setup process from installation through final testing. Every step is shown as it actually appears in the WordPress admin. By the end, your site will have a flash-free night mode toggle that automatically detects your visitors’ OS preferences, remembers their choices, and looks professional on every device.
We use Nexu Eclipse — the WordPress night mode plugin that sets up in minutes with no coding required throughout this tutorial, because it is the implementation that gets the technical details right out of the box: no white flash, no image distortion, OS sync from day one.
What you will have when this is done
Flash-free night mode — no white flash on any page load
OS preference auto-detected for every first-time visitor
User choice remembered across all sessions
Product images and photos displayed accurately in dark
Professional toggle visible and styled on your site
Smooth animated mode transition on toggle click
Before you start
If you have any existing dark mode plugins installed, deactivate and delete them before installing Nexu Eclipse. Running two dark mode plugins simultaneously causes conflicts. Check your active plugins list for anything with “dark mode,” “night mode,” or “dark theme” in the name and remove it before proceeding.
The complete setup: 8 steps to a working night mode toggle
1
Install the plugin
~45 seconds
From your WordPress dashboard, go to Plugins → Add New Plugin. In the search box, type Nexu Eclipse. When the plugin appears in the results, click Install Now, then click Activate once installation completes. The plugin is now active and its settings panel is available in your WordPress admin sidebar.
If you purchased the premium version, download the .zip file from your account, then go to Plugins → Add New Plugin → Upload Plugin and upload the file instead of searching the repository.
2
Open the settings panel
~10 seconds
In the WordPress sidebar, locate Nexu Eclipse and click it to open the settings panel. You will see several tabs across the top of the settings area: General, Switch Style, Colors, Exclusions, and Advanced. You will configure each of these in the steps that follow. Start with the General tab, which should be active by default.
3
Configure General settings — enable OS sync
~30 seconds
In the General tab, you will find the core behavior settings. The most important setting here is Sync with OS Preference — enable this. It tells the plugin to automatically detect whether a visitor’s device is in dark mode and apply your night mode accordingly. This detection works via the CSS prefers-color-scheme media query, which is supported across all modern browsers including Chrome, Safari, Firefox, and Edge.
Set Default Mode to Light. This ensures that visitors without any OS dark mode preference, and visitors on devices that do not support color scheme detection, see your site in its standard appearance. The OS sync setting will override this for visitors who have expressed a dark preference.
Save your settings after each tab before moving to the next. Use the Save Changes button at the bottom of the settings panel.
4
Choose your toggle style and position
~30 seconds
Click the Switch Style tab. You will see a visual gallery of toggle design options — different shapes, icon sets, and labeled variants. Click the one that fits your site’s visual style. If your site uses rounded corners and a minimal aesthetic, an icon-only circular toggle looks cleanest. If your site is more functional and clarity matters more than restraint, a labeled “Light / Dark” slider is more immediately understandable to new visitors.
Below the style gallery, set the Toggle Position. For most sites, Fixed Floating (positioned in a corner of the screen) is the fastest to set up and always visible to visitors. If your theme’s header has a navigation bar with available space, Header placement feels more integrated — visitors find it exactly where they expect to find UI controls. Pick the position that suits your site’s layout and save.
The Switch Style tab — choose the toggle that matches your site’s visual language.
5
Set your dark color palette
~60 seconds
Click the Colors tab. This is where you define what your site actually looks like in dark mode. You will see color pickers for the main elements: page background, primary text, secondary text, links, and borders. If you want to get a working result quickly, use these starting values — they are a neutral, professional dark palette that works well with most themes:
The values above are a neutral starting point. When adjusting them, always verify your text/background combinations against the WebAIM Contrast Checker to confirm your dark palette meets WCAG AA requirements (4.5:1 ratio for normal text) before going live. You can always come back and adjust any individual value until the dark theme looks right for your specific design.
The Colors tab — set your dark palette here. The six values above are a neutral starting point for any site.
6
Protect your images with exclusions
~20 seconds
Click the Exclusions tab. Nexu Eclipse protects images from color transformation by default — this means your photos and product images will display accurately in dark mode without any inversion or tinting. Verify that the Exclude Images option is enabled (it should be on by default).
If your site has a logo that was designed for a light background, add it to the exclusions here. Find your logo’s CSS selector using your browser’s developer tools (right-click on the logo, choose “Inspect”), then paste the selector into the exclusions field. Common selectors for logos are .site-logo, .custom-logo, or #logo img depending on your theme.
The Exclusions tab — images are protected by default. Add your logo selector if needed.
7
Set transition speed in Advanced settings
~15 seconds
Click the Advanced tab. Find the Transition Duration setting and set it to 250ms — this is the sweet spot that makes the mode switch feel smooth and deliberate without feeling sluggish. If your site uses a faster, more dynamic visual style, try 180ms. If your site is editorial and calm, 300ms feels more considered. Save your changes.
While you are in the Advanced tab, you will also find the Scheduling options. If you want night mode to activate automatically at sunset and switch back at sunrise, you can configure this here. For the quick setup, this is optional — you can return to it later.
🔗While free plugins offer basic functionality, the Nexu Eclipse dark mode comparison reveals key advantages in performance, customization, and user preference retention. →
The Advanced tab — set transition to 250ms for the smoothest switch feel.
8
Test the result — 5 checks that confirm everything works
~60 seconds
Open your site in a new browser tab and run through these five checks. Each one confirms a specific aspect of the setup:
A
OS sync test: Set your device or browser OS to dark mode. Open your site in a fresh incognito window. The site should load in dark mode immediately — without you pressing the toggle. If it does, OS sync is working.
B
FOUC test: Click between several pages of your site while in dark mode. Watch the top of the screen on each page load. If there is no white flash before the dark theme appears, FOUC elimination is working correctly.
C
Image test: Navigate to a page with images. Are they displaying in their normal, accurate colors? If photos look like photographic negatives, the image exclusion is not working — return to the Exclusions tab and verify the image protection setting is enabled.
D
Toggle test: In light mode, click the toggle. The site should switch to dark with a smooth animated transition. Click it again — it should switch back to light. The toggle should be visible and clearly placed in the position you selected.
E
Persistence test: Switch to dark mode using the toggle. Close the browser tab completely. Reopen your site. The site should load directly in dark mode, with your stored preference applied from the first pixel — no flash, no loading in light then switching.
If all five checks pass, your night mode toggle is fully set up and working correctly. You are done with the essential configuration.
What your site looks like before and after
Once the setup is complete, visitors who arrive with OS dark mode enabled will see the dark version immediately — no toggle required, no flash, no adjustment period. The transformation should look intentional and polished, not like a filter applied over your existing design.
Before — light mode only, no night option for evening visitors
After — night mode working, images accurate, visitors comfortable
Quick troubleshooting: three things that sometimes need a fix after setup
Flash still appears after setup
Most likely cause: a caching plugin is modifying how the initialization script loads. Temporarily deactivate all caching plugins, clear your cache, and retest. If the flash disappears, your caching plugin needs to be configured to exclude the Nexu Eclipse script from defer, async, or combination optimizations. Check your caching plugin’s JavaScript settings for a script exclusion list.
Images look tinted or discolored
Go back to the Exclusions tab and verify that the image exclusion toggle is enabled. If images are still affected, your theme may be loading images inside a container div rather than as direct img elements — add the container’s CSS selector to the exclusions list instead of, or in addition to, the img selector.
Toggle is not visible or is in the wrong place
Return to the Switch Style tab and change the Toggle Position to Fixed Floating. This placement is theme-independent and will always work regardless of your theme’s header structure. Once the toggle is visible, you can experiment with Header or Footer placement if you prefer a more integrated appearance.
Where to go next: optional refinements
With the core setup complete and all five test checks passing, your night mode toggle is live and working. The following refinements are optional — things to return to when you want to polish the result beyond the baseline.
Refine the color palette
Return to the Colors tab and adjust any values that do not feel quite right. Compare your light and dark modes side by side. Adjust background warmth, text brightness, and accent color saturation until both modes feel like the same site in different lighting.
Set up scheduled switching
Go to Advanced → Scheduling and configure sunset/sunrise switching. This automatically activates night mode when the sun sets in the visitor’s timezone — the most natural and frictionless dark mode experience possible.
Exclude specific pages
If any page on your site has a custom dark or high-contrast design that does not benefit from night mode processing, add its URL to the page exclusions in the Exclusions tab. Night mode will skip that page entirely.
Test on actual mobile devices
Open your site on an iPhone or Android phone with OS dark mode enabled. This is where the majority of your evening visitors will experience it — verify the toggle is discoverable, the colors look good on an OLED screen, and the transition is smooth at mobile rendering speed.
That is the complete setup. From installation through testing, Nexu Eclipse — the WordPress night mode plugin that delivers a professional result with zero coding required — takes care of the technical complexity so you can focus on the configuration decisions. The result is a night mode experience that your visitors will notice for being right rather than notice for being broken.
3 Minutes · No Code · Flash-Free · OS Sync · Image Safe
Ready to install? The whole setup takes less time than this article took to read.
Nexu Eclipse handles FOUC elimination, OS sync, image protection, and smooth transitions automatically. You set the colors and choose the toggle style. Everything else is done.
Nexu Eclipse by NEXU WP
WordPress plugin · 3-Min Setup · No Code · No FOUC · OS Sync
Get Nexu Eclipse
Hey! just followed your tutorial to add the night mode toggle to our school's WordPress site super easy, no coding required. My only question is about the toggle style
Got night mode set up in like 5 minutes flat. Synced right away no issues
Quick question how do you actually pick the toggle style that best fits your site's vibe? the tutorial mentions a visual gallery, but I can't seem to find it in the settings
Quick question do I need to turn on