Description
Lumino Dark Mode adds a stylish floating toggle button that lets your visitors switch between dark and light mode with a single click. It works on any WordPress theme without touching your theme files.
How it works:
Lumino uses a smart CSS filter technique (invert + hue-rotate) applied to the entire page — not just specific elements. This means every part of your site — text, backgrounds, borders, menus, sidebars, widgets — all switch perfectly. Images and videos are automatically re-corrected so they always look natural.
Features:
- Works with any WordPress theme — no CSS class knowledge needed
- 5 beautiful toggle button styles (Classic, Night, Gradient, Outlined, Sunset)
- Choose toggle position: Bottom-Right, Bottom-Left, Top-Right, Top-Left
- Custom offset position (pixels from edge)
- Adjustable toggle width, height, and border radius
- Smart base theme auto-detection (light or dark)
- User preference saved in localStorage — persists across pages and sessions
- Respects OS-level dark mode preference (prefers-color-scheme)
- Flash prevention — correct mode applied before first paint
- Keyboard accessible (Tab + Enter/Space)
- Lightweight — pure vanilla JavaScript, zero dependencies
- Fully translatable (text domain: lumino-dark-mode)
Privacy Policy
Lumino Dark Mode stores the visitor’s dark/light mode preference locally in the browser’s localStorage under the key lumino_mode. This data never leaves the visitor’s browser and is never sent to any server, including the website owner’s server or any third-party service. No personal data is collected or processed by this plugin.
Installation
- Upload the
lumino-dark-modefolder to the/wp-content/plugins/directory, or install directly via Plugins > Add New in WordPress admin. - Activate the plugin through the Plugins menu.
- Go to Settings > Lumino Dark Mode to configure the toggle style, position, and behavior.
FAQ
-
Does it work with all themes?
-
Yes. Lumino applies a CSS filter to the entire
<html>element, which affects every part of the page regardless of your theme’s CSS structure. -
Will images look inverted in dark mode?
-
No. Images, videos, iframes, and canvases are automatically re-inverted so they always appear in their original colors.
-
My site is already dark — will this work?
-
Yes. Lumino auto-detects whether your site’s base theme is light or dark. If your site is already dark, toggling will switch to light mode instead. You can also force this in Advanced Settings.
-
How is the user’s preference saved?
-
The preference is saved in the browser’s
localStorageso it persists across all pages and sessions without needing cookies or a database. -
Yes. Go to Settings > Lumino Dark Mode and choose your preferred corner position, plus exact pixel offsets from each edge.
-
Does it affect performance?
-
Lumino loads one small CSS file and one small JS file. You can also enable “Enqueue Scripts in Head” in Advanced Settings to prevent any flash of the wrong mode on page load.
-
Is it mobile friendly?
-
Yes. The toggle is tap-friendly and tested on mobile browsers.
-
What WordPress version is required?
-
WordPress 5.8 or higher.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Lumino Dark Mode” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Lumino Dark Mode” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.2
- Fixed: Settings form no longer posts to options.php — now handled directly in plugin to prevent 503 errors on LiteSpeed and WAF-protected hosts.
1.1
- Fixed: Flash prevention now handles dark base themes correctly (FIX #1)
- Fixed: enqueue_in_head now defaults to enabled to prevent flash (FIX #2)
- Fixed: Base theme detection now walks body then html element (FIX #3)
- Fixed: Style-4 Outlined dark mode colors no longer invert oddly (FIX #4)
- Fixed: positionThumb now uses requestAnimationFrame and ResizeObserver (FIX #5)
- Fixed: matchMedia listener now cleaned up on pagehide to prevent SPA leaks (FIX #6)
- Fixed: Reset confirmation moved from inline onclick to proper JS event listener (FIX #7)
- Improved: Sun and moon icons replaced with crisp SVGs, always visible
- Improved: All toggle styles refined with better colors and contrast
- Updated: Version bumped to 1.1
1.0
- Initial release.
- 5 toggle styles: Classic, Night, Gradient, Outlined, Sunset.
- Smart base theme auto-detection.
- Flash prevention via early localStorage read.
- Full WordPress.org coding standards compliance.
- Nonce verification, input sanitization, output escaping throughout.
- Keyboard accessible toggle button.
- OS dark mode preference support (prefers-color-scheme).
- Compatible with WP Rocket, W3 Total Cache, LiteSpeed Cache, WP Super Cache, and more.