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 d
PricingFree downloadThe WordPress.org download is free. Pro versions, add-ons or external services may cost extra.
CompatibilityRequires WordPress 5.5 and PHP 7.1.
SourceWordPress plugins · Oct 19, 2026
01 / Source details
About this tool.
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 — darken the editor while the rest of the dashboard stays light, or the other way around.
Admin & Editor Color Presets : Choose a color preset for the WordPress admin and a separate one for the Block Editor. Both default to Auto, which derives a shade for every color on screen rather than forcing one background and one text color — so admin screens added by other plugins come out readable without being configured first.
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 with a keyboard shortcut. Ctrl + Alt + D works out of the box, and you can record any key combination you prefer instead.
Multiple Floating Switch Designs : Choose from 5 floating switch styles — 16 in total with Pro — and pick the screen corner it sits in, with its own margin controls.
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. Style it independently of the floating switch, or reuse the global settings.
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.
Per-Block Switch Styling : Set the switch style, size, background, icon color, text color, border, corner radius, and alignment for each block 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 5 predefined dark color presets — 11 in total with Pro — 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.
Iframe Dark Mode : Keep embedded content in step with the active theme. Same-origin iframes are styled directly, and cross-origin embeds are notified of theme changes so they can follow along.
Live Preview : See your own site with your unsaved settings applied, right beside the settings — with desktop and mobile views, a refresh control, and a full screen mode.
Settings Search : Press Ctrl+K (Cmd+K on macOS) to jump straight to any setting from anywhere in the panel, without hunting through tabs.
Reset to Defaults : Restore a single section or every setting at once, each behind a confirmation step.
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 every feature from one modern, centralized settings panel in the WordPress admin area — organized into clear sections, usable on phones and tablets, with instant saves and clear success and error messages.
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
WP Dashboard Dark Mode (examples)
Fluent SMTP
Fluent Forms
Fluent CRM
Ninja Tables
Fluent Booking
Fluent Snippets
Fluent Cart
WP Social Ninja
FluentAuth
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 elem
See it in action
Screenshots & previews.
WordPress dark mode in action — one click on the floating switch turns the whole site dark, instantly and with no page reload.Gutenberg block editor dark mode — write and edit posts and pages in a comfortable dark WordPress editor interface.WooCommerce dark mode — shop, product, and category pages converted to a dark theme automatically, with product images kept readable.Frontend dark mode controls — enable dark mode for visitors, set default dark mode, OS aware (system preference) dark mode, keyboard shortcut, and time based automatic dark mode, with a live preview of your site.Admin dark mode controls — turn on WordPress admin dashboard dark mode, Block Editor (Gutenberg) dark mode, and Classic Editor dark mode independently, plus page exclusions and custom admin dark mode CSS.Dark mode for the WordPress admin dashboard — the Darkify settings screen itself shown in dark mode for eye-friendly, low-light editing.Floating dark mode switch styles — choose from 15 animated toggle designs, set switch size, position, background and icon colors, and preview changes live.Dark mode color presets — pick from 11 ready-made dark color schemes (Carbon Mist, Midnight Reverie, Verdant Depths, Celestial Tide, Emberwood and more), then fine-tune background, text, and link colors.Dark mode image controls — adjust image brightness and grayscale so photos and product images stay clear on dark backgrounds, with per-image exclusions.Dark mode video controls — set video brightness and grayscale, or swap in a dark mode version of self-hosted, YouTube, Vimeo, and Dailymotion videos.Custom dark mode CSS — add your own CSS that loads only when dark mode is active, plus CSS that applies in both light and dark mode.Backup and restore dark mode settings — export your Darkify configuration as a JSON file and import it to migrate settings to another WordPress site.Dark mode toggle Gutenberg block — drop a dark mode switcher block into any post or page and style it from the block sidebar.Dark mode color themes in the block editor — switch the Gutenberg editor color scheme straight from the toolbar and preview your content in every dark preset.Elementor dark mode widget — add the Darkify dark mode switcher to any Elementor page or template and choose your switch style.
02 / Source details
Getting started.
AUTOMATIC INSTALLATION (EASIEST WAY)
01Visit Plugins > Add New .
02Search for Darkify Dark Mode .
03Install and activate the Darkify plugin.
MANUAL INSTALLATION
Uploading in WordPress Dashboard
04Download darkify.zip
05Navigate to the ‘Add New’ in the plugins dashboard
06Navigate to the ‘Upload’ area
07Select darkify.zip from your computer
08Click ‘Install Now’
09Activate the plugin in the Plugin dashboard
Using FTP
10Download darkify.zip
11Extract the darkify folder to your computer
12Upload the darkify folder to the /wp-content/plugins/ directory
13Activate the plugin in the Plugin dashboard
After activation
14Go ‘Darkify’ Menu from the left panel of admin
15Configure settings as you want.
For basic usage, have a look at Darkify quick start guide
03 / Source details
Frequently asked questions.
Can I enable Dark Mode only for the WordPress Admin Dashboard?
Yes! You can choose to enable Dark Mode specifically for the Admin Panel, Block Editor (Gutenberg) , and Classic Editor from the Admin settings, even if the frontend is disabled.
Does Darkify support automatic switching based on OS settings?
Absolutely. You can enable the OS Aware Dark Mode feature, which automatically detects if a user is using a dark or light theme on their device (macOS, Windows, iOS, or Android) and matches your site accordingly.
Is it possible to schedule Dark Mode for specific hours?
Yes, the plugin includes a Time Based Auto Dark Mode feature where you can pick a specific “From” and “To” time to automate the transition based on the user’s local time.
Can I customize the appearance of the dark mode switch?
Yes, Darkify offers a range of Switch Togglers (e.g., Orbit, Classic, Expand, Inner Moon, Within), with more available in Pro. You can also fully customize the switch background, size, icon color, and border.
Does the plugin allow me to exclude certain pages or elements?
Yes, the Advanced settings allow you to disallow Dark Mode on specific page slugs. You can also fine-tune the experience by allowing or disallowing specific HTML elements, tags, or CSS IDs.
Will my images and videos look too bright in Dark Mode?
Darkify includes Image and Video Controls that allow you to lower brightness, apply grayscale levels, or even replace specific media files with dark-mode-optimized versions to maintain a perfect aesthetic.
Can I change the color scheme to match my brand?
Definitely. You can choose from several Color Presets (like Midnight Reverie or Verdant Depths) or manually customize the background, text, link, and button colors.
Does Darkify clean up data when uninstalled?
Yes, under the Extras tab, you have an option to clean up all plugin data and settings when the plugin is deleted, keeping your database clean and optimized.
Does Darkify work with Elementor and other Page Builders?
Yes! Darkify is fully compatible with popular page builders like Elementor, Divi, WPBakery, Beaver Builder, and Oxygen . It automatically adapts to their structures for a seamless dark mode experience.
Will Darkify slow down my website loading speed?
Not at all. Darkify is built with a performance-first approach . It is extremely lightweight, uses optimized CSS/JS, and works perfectly with caching plugins like WP Rocket, W3 Total Cache, and LiteSpeed Cache .
Is this plugin compatible with WooCommerce?
Yes, Darkify is WooCommerce ready . It applies dark mode styling to WooCommerce pages such as product, cart, and checkout layouts.
Do I need any coding knowledge to use this plugin?
No coding is required. You can manage everything—from color presets to switch styles—through our intuitive settings dashboard.
Is Darkify Dark Mode GDPR compliant?
Darkify does not collect personal data and stores user preferences locally in the browser.
Is the dark mode switch accessible?
Yes. Every switch (floating, menu, shortcode, Gutenberg block and Elementor widget) is a real button. Visitors can reach it with the Tab key and turn dark mode on or off with Enter or Space. Screen readers announce it as “Dark mode” together with whether it is on or off. Keyboard focus shows a visible outline, and the switch animations follow the visitor’s “Reduce motion” setting.
Website LLMs.txt and LLMs-Full.txt Generator is an LLMs.txt generator and llms-full.txt generator for WordPress. It helps site owners generate, manage, preview, validate, and serve AI discovery files from published public content. Use it to create structured /llms.txt and optional /llms-full.txt end
EngageDock AI is a customizable floating contact widget for WordPress websites that want more leads and faster visitor communication. It helps small businesses turn website traffic into calls, texts, emails, and callback requests from one clean contact panel. Key Features: Click-to-Call – One tap ca
Altify AI is an auto ALT text and AI ALT text plugin for WordPress images. It helps generate descriptive image ALT text for accessibility and image SEO. Use bulk image ALT text tools for your Media Library, generate featured image ALT text automatically, and scale WooCommerce image ALT updates with
The Accepted Payment Methods plugin is a straightforward, lightweight solution that enhances your website by displaying visually appealing icons of the payment methods you accept. This plugin is ideal for a variety of websites, including e-commerce platforms, service-oriented websites, and informati
