Darkify – Dark Mode & Night Mode for Website & Admin (Dark Theme Included) vs ECS – Ele Custom Skin for Elementor

Darkify adds WordPress Dark Mode and Night Mode to both the website frontend and the WordPress admin dashboard. Visitors can switch between light and dark themes using a toggle, while site owners control how dark mode behaves across the frontend, admin panel, and editors. Darkify supports frontend dark mode, admin dashboard dark mode, and editor-specific dark mode for Gutenberg (Block Editor) and the Classic Editor. It includes OS-aware detection, default dark mode, time-based scheduling, keyboard shortcuts, and multiple toggle placement options. Designed for performance and compatibility, Darkify works seamlessly with popular WordPress themes, page builders, and WooCommerce — without modifying theme files or requiring custom code. Site owners can customize dark mode colors, switches, media handling, and element visibility. Darkify also provides controls for images, videos, scrollbars, mobile behavior, and page or element-level targeting to ensure dark mode integrates cleanly with different themes, builders, and layouts. How Darkify Works Darkify applies dark mode styling using configurable rules rather than modifying theme files. You can enable dark mode globally or limit it to specific areas, pages, posts, or elements. Settings can be adjusted from a centralized admin panel and reused across different sites using import and export tools. Darkify is designed to work with popular WordPress themes, page builders, and multisite installations, allowing dark mode to be configured without requiring custom code. Why Choose Darkify? ✔ Dark mode for frontend and admin dashboard ✔ Works with Gutenberg, Elementor, and popular builders ✔ OS-aware, scheduled, and manual switching ✔ Lightweight and performance-focused ✔ No theme modification required Live Demo | Support | Documentation | Upgrade to Pro! Key Features of Darkify Dark mode Plugin Frontend Dark Mode: Enable dark mode on the public-facing website and allow visitors to switch between light and dark themes using a toggle. Admin Dashboard Dark Mode: Apply dark mode to the WordPress admin area to provide a darker interface while managing site content and settings. Editor-Specific Dark Mode: Enable dark mode independently for the WordPress Admin Panel, Block Editor (Gutenberg), and Classic Editor. Default Dark Mode: Load the website in dark mode by default while allowing visitors to switch back to light mode at any time. OS-Aware Dark Mode: Detect the visitor’s operating system preference and automatically apply light or dark mode accordingly. Time-Based Dark Mode: Schedule automatic switching between light and dark mode based on a defined time range. Keyboard Shortcut: Allow users to toggle dark mode using a simple keyboard shortcut: Ctrl + Alt + D for quick access. Multiple Floating Switch Designs: Choose from different floating switch styles and positions to control how the toggle appears on the site. Switch Attention Effect: Enable an animation on the floating switch to draw visitor attention. Choose from multiple effect styles including Pulse to highlight the toggle without being intrusive. Customizable Switch: Adjust the switch size, colors, icons, and styling to match the site’s design. Switch in Menu: Insert the dark mode toggle into selected WordPress navigation menus. Shortcode Switch: Place the dark mode toggle anywhere on the site using a shortcode, including pages, posts, widgets, or templates. Dark Mode Gutenberg Block: Instantly add a sleek dark mode toggle to any post or page using the Gutenberg block. Place it anywhere and give your visitors full control over their viewing experience. Color Presets for Gutenberg: Select from 5 predefined dark color schemes directly inside the Gutenberg editor. Dark Mode Elementor Widget: Seamlessly insert a customizable dark mode switch into any Elementor layout. Design it your way and match it perfectly with your site’s style. Dark Mode Widget Support: Easily enable dark mode for WordPress widgets and keep your entire site visually consistent—no extra setup, no hassle. Multiple Switch Placement Options: Display the dark mode toggle as a floating button, menu item, shortcode, or by targeting a custom CSS selector. Mobile-Specific Controls: Control switch visibility, position, spacing, and behavior separately for mobile devices. Color Presets & Customization: Choose from 8 predefined dark color presets or manually configure background, text, link, and UI colors. Dark Mode Scrollbar Styling: Optionally apply dark styling to browser scrollbars for a more consistent dark interface. Advanced Image Control: Adjust image brightness, contrast, and grayscale settings to improve image visibility in dark mode. Video Control: Modify video brightness and grayscale settings to better match dark mode layouts. Element-Level Control: Include or exclude specific HTML elements, tags, classes, or IDs from dark mode styling. Settings Backup & Restore: Export plugin settings to a file and import them on another site or restore them later. Clean Uninstall Option: Optionally remove plugin settings and data from the database when uninstalling the plugin. Page Builder Compatibility: Compatible with popular page builders such as Elementor, Divi, WPBakery, Beaver Builder, Visual Composer, and Oxygen. Easy Settings Panel: Manage all plugin features from a centralized settings panel in the WordPress admin area. Multisite Support: Configure dark mode settings for WordPress multisite networks, globally or per site. Multilingual Ready: Translation-ready and compatible with multilingual WordPress setups. Theme Compatibility: Designed to work with most WordPress themes without requiring theme-specific modifications. Developer-Friendly: Provides a structured and extensible codebase that developers can customize using hooks and filters. Cross-Browser Compatibility: Designed to work across modern browsers such as Chrome, Firefox, Safari, Edge, Opera, etc. Documentation & Support: User guides, tutorials, and support are available through documentation and the WordPress.org support forums. Full Features & Setup Guide How to Add Dark Mode in Gutenberg (WordPress Block Editor) How to Add Dark Mode in Elementor Page Builder Compatibility Gutenberg WPBakery Elementor Beaver Builder SiteOrigin Divi LayersWP MotoPress Cornerstone Themify Builder Spectra Visual Composer Brizy Oxygen Builder CoBlocks GreenShift Bricks Builder JetEngine (Crocoblock ecosystem) …and more Compatible Themes (examples) Hello Elementor Astra Divi Kadence Themify Ultra OceanWP Hestia Inspiro GeneratePress Avada Blocksy Neve Betheme The7 Flatsome BuddyBoss Spacious Responsive Customizr ColorMag Phlox Photograph Sydney Enfold Uncode Salient Jupiter X X Theme Newspaper Block Theme …and more ↔ Slider Compatibility Darkify is fully compatible with the most popular WordPress slider plugins: Slider Revolution Smart Slider 3 LayerSlider MetaSlider Soliloquy Master Slider RoyalSlider Swiper (Theme-integrated sliders) Owl Carousel–based sliders Slick Slider integrations Kadence Slider Elementor Slides Widget Divi Slider Module Avada Slider (Fusion Slider) Block Editor Slider Blocks Ultimate Addons Slider Modules …and more PRO VERSION FEATURES 🎨 Design & Customization Options 16+ Floating Switch Designs Choose from a diverse collection of floating switch styles to perfectly match your website’s look and feel. Draggable Switch Positioning Allow users to move the floating dark mode switch anywhere on the screen. This drag-and-drop flexibility ensures convenient access from any page or section. Special Color Preset Customization Customize your dark mode theme with advanced color settings. Change link colors, border colors, form field styling, and button appearances to align with your brand identity. Custom CSS for Dark Mode Add custom CSS styles that apply only in dark mode. This gives developers and designers complete control for fine-tuning the dark theme experience. 🖼️ Media Handling Image Inversion Automatically invert specific images for better visibility in dark mode. Improve both aesthetics and accessibility without needing to edit the original assets. Image Replacement Seamlessly replace specific images with dark-mode-optimized versions. Perfect for logos, banners, or illustrations that need a customized look in night mode. Video Replacement Automatically swap videos with dark-friendly versions to maintain a consistent design across your website’s visual elements. 🔧 Advanced Visibility Controls Allow / Disallow Elements Fine-tune your dark mode display by selecting which HTML elements or sections should use dark mode styling—and which should not. Allow / Disallow Pages Choose which individual pages display dark mode. Exclude landing pages, checkout flows, or any special content for a fully tailored user experience. Allow / Disallow Posts Decide which specific posts support dark mode. Maintain full editorial control over how your content appears across different post types. External services Darkify uses Appsero SDK to collect some telemetry data upon user’s confirmation. This helps us to troubleshoot problems faster & make product improvements. Appsero SDK does not gather any data by default. The SDK only starts gathering basic telemetry data when a user allows it via the admin notice. We collect the data to ensure a great user experience for all our users. Integrating Appsero SDK DOES NOT IMMEDIATELY start gathering data, without confirmation from users in any case. Learn more about how Appsero collects and uses this data. OTHER AMAZING PRODUCTS FROM ThemeAtelier ➡️ ChatHelp – WhatsApp Chat Help Plugin – A flexible WhatsApp chat plugin that helps website visitors start instant conversations with you directly from your WordPress site. ➡️ Eventful – Events Showcase and Filter Bar for The Events Calendar – An event display plugin for The Events Calendar that helps you showcase events in clean, modern, and fully responsive layouts without any coding. ➡️ Greet – Video Bubble Warm Welcome Plugin – A video welcome bubble plugin that helps you greet visitors warmly and provide quick contact options to boost engagement. ➡️ Domain For Sale – A domain listing and offer management plugin that helps you list domains, collect buyer offers, and manage secure sales with escrow payments directly from WordPress. ➡️ Eventful for Elementor – Events Showcase For The Events Calendar and Elementor – An Elementor addon for The Events Calendar that lets you design and display events using Elementor widgets with advanced, responsive layouts. ➡️ Better Chat Support For Messenger – A Facebook Messenger chat plugin that allows visitors to contact you instantly through Messenger with customizable chat bubbles.

ECS adds what Elementor doesn’t have — without replacing what it does well. Every feature is a standalone module. Enable only what you need from ECS → Modules in the WordPress admin. Unused modules load zero CSS, zero JS, and register no hooks. 🎨 Dark Mode Colours A Default Colours tab appears inside Elementor’s Site Settings, right next to Global Colors. Set a Default and a Dark Mode colour for every global colour slot. Dark mode colours are written as CSS variables — no JavaScript swapping, pure CSS, zero flash. A fallback swatch shows the default colour when the dark slot is empty. The Dark Mode Switcher widget lets visitors toggle between light and dark with full style controls. 📐 Container Layout Two additional layout modes for Elementor Flex Containers: Slider Mode — Turn any container into a CSS-only slider. No JS library, no dependencies. Custom Layout — Pick a Theme Builder template as the layout frame. Place ECS Placeholder widgets inside the template; ECS distributes the container’s children into those slots automatically. Supports cycling and graceful fallback. Works live in the Elementor editor. 🔁 Loop Custom Layout Arrange Loop Grid items inside a Custom Layout template using ECS Placeholder widgets — powered by Elementor’s native Loop Grid query. Full editorial control over the item grid without leaving Elementor. 📱 Menu Responsive Turn any Elementor Nav Menu widget into a responsive hamburger menu. Layout, alignment, animation, and breakpoint controls — all from the Elementor panel. ✍️ Editorial Text Wrap images inside text blocks with float controls and captions. Magazine-style editorial layouts built entirely in Elementor. 🎨 Style Templates Save any widget’s Style tab settings as a named preset and apply them to other widgets of the same type in one click — across pages, templates, and sites. Export and import your full style library as JSON. 🛠 JSON PowerEdit Edit any Elementor widget’s raw settings JSON directly from the panel. Raw textarea for paste-and-replace, interactive tree view for surgical edits. Keyboard shortcut: Ctrl/Cmd + Enter to apply. ✅ Legacy (ECS 3.x — backward compatibility) The original loop skin functionality is preserved in the Legacy module for existing sites built with ECS 3.x. If you’re updating from ECS 3.x, this module activates automatically. For new projects, use Elementor’s native Loop Builder. Note: This plugin requires Elementor (free). Container Layout (Custom Layout mode) and Style Templates require Elementor Pro.