- 2026-05-27
- by LethaldiranMX
- Trends
- 0 Comments
DeveloperDim inactive sessions with a configurable, accessible overlay — lowers visual energy on OLED screens and nudges focused browsing.
Eco Mode displays a soft overlay on pages that have been inactive for a configurable amount of time. The overlay can lower power draw on OLED/AMOLED screens, reduce visual fatigue, and act as a gentle reminder to visitors who have walked away from their screen.
Key features
- Configurable idle time from 15 seconds up to 1 hour.
- Adjustable overlay opacity (70–100%).
- Optional logo display.
- Smart return-from-hidden behavior: require an explicit click or scroll before the overlay dismisses, useful on multi-tab sessions.
- Works with the most common browsers (Chrome, Edge, Firefox, Safari) and handles the back-forward cache.
- Throttled event handling keeps the overlay lightweight.
- Accessible: ARIA dialog role, focus trap on the resume button, keyboard support (Enter, Space, Escape).
- Five built-in languages (English, Italian, French, German, Spanish) with per-language custom messages.
- Exclude specific URL paths or CSS selectors from triggering the overlay.
- WooCommerce aware: cart, checkout, and account pages are skipped by default.
- Mobile-aware: disabled by default on phones.
- Respects
prefers-reduced-motion. - No tracking, no external requests.
For developers
Two filters are provided for advanced customization:
eco_mode_should_run— returnfalseto disable the overlay for the current request.eco_mode_frontend_config— modify the configuration object passed to the frontend script.
A note on energy savings
Dark pixels consume less power only on OLED/AMOLED screens. On traditional LCD monitors the backlight is constant and the energy saving is negligible. Eco Mode also reduces visual load and lets the visitor know the session has been idle.
