WP Dark Mode – WordPress Dark Mode Plugin for Improved Accessibility, Dark Theme, Night Mode, and Social Sharing

Description

CREATE A STUNNING DARK MODE VERSION OF YOUR WEBSITE ?

WP Dark Mode instantly creates a dark mode version of your website without any complicated setup. Activate the plugin and your site visitors will experience a dark mode version of your website as per their preferred operating system preference. This is the easiest and highest-rated dark mode plugin for WordPress on the repository.

Check what popular WordPress expert Matt (WPress Doctor) thinks about WP Dark Mode.

??? View Demo | ?? Get the Premium Version

?? WP DARK MODE FEATURES

1. Floating Dark Mode Switch – Display a dark mode floating switch in the footer of your website. The dark mode switch lets your site visitors easily toggle between dark mode and light mode.
2. Default Dark Mode – Make dark mode the default mode of the website. Users will see the dark mode first after entering your website.
3. Dark mode Elementor Widget – Place the dark mode switch on any page/post using the Elementor widget.
4. Dark mode Gutenberg Block – Place the dark mode toggle on any page/post using the Gutenberg block.
5. Apply Light or Dark Theme Based on OS Setting – WP Dark Mode can detect the user’s device theme (light mode or night mode) and automatically enables dark mode for your visitors to ensure a seamless website experience.
6. Admin Panel Dark Mode – Enable dark mode on the WordPress admin panel/dashboard. Give your eyes a much-needed rest while working long hours by enabling dark mode on the default WordPress dashboard.
7. Dark Mode Color Presets – 2 exclusive dark mode color presets are available to quickly change the dark mode color from the predefined preset. Give your website a brand new look and feel by changing the preset.
8. Remember Dark Mode – Enable the plugin to remember users’ choices and automatically enable dark mode for visitors who used it before.
9. Shortcode Support – Take advantage of the [wp_dark_mode_switch] shortcode to display the dark mode switch anywhere on your website.
10. Themes Compatibility – WP Dark Mode is compatible with the most popular WordPress themes including Astra, Avada, Betheme, The7, Flatsome, BuddyBoss, Divi, OceanWP, and many more. Check the full list of compatible themes.
11. Popular Page Builder Compatibility – Experience compatibility with Divi Builder, WP Bakery, Visual Composer, Beaver Builder, Oxygen Builder, and Elementor.
12. Revolution Slider Compatible – This plugin is compatible with the revolution slider.
13. Low Image Brightness – Decrease the brightness and contrast of images in the dark mode.
14. Accessibility Features – Toggle dark mode by using a keyboard shortcut (Ctrl + Alt + D) or using a URL/domain parameter.
15. Dark Mode Toggle Animation – Choose the animation effect between dark/white mode among numerous options including Fade In, Pulse, Flip, and many more.
16. Social Share – Social share icons allow your website visitors to share your content with ease. With plenty of cool social media icon templates and share count displays, this is the only dark mode plugin that supports dedicated social share buttons.
17. Exclude WP Dark Mode from Caching – Enable this feature to exclude WP Dark Mode from server-side caching and ensure a seamless dark mode transition.
18. Device-wise Dark Mode Toggle – Easily choose where to display the dark mode switch: Desktop, Mobile, or Tablet.
19. Dark Mode Analytics – Track how many times site visitors have used dark mode in a certain period from the analytics menu and your WordPress Admin Dashboard.

??? View Demo | ?? Get the Premium Version

? GO BEYOND WITH WP DARK MODE ULTIMATE

1. Schedule Dark Mode – Schedule a time for enabling dark mode on your website and take full control over your website’s appearance.
2. Access 19 Dark Mode Floating Switch Styles – Get instant access to 19 stunning dark mode switch styles. Choose your preferred dark mode switch button for the users to toggle the dark mode.
3. Customize Dark Mode Floating Switch Placement – Customize the placement of the dark mode switch. You can place it anywhere on your website.
4. Premium Dark Mode Color Presets – 13 exclusive ready-made dark mode color presets are available to quickly change the dark mode color from the predefined presets.
5. ?? Preset Color Customization – Tailor your dark mode experience to perfection. Choose a preset and customize the color of every element, starting from the body and text to links, input fields, buttons, and even the scrollbar—exactly the way you want.
6. ?? Create Custom Color Preset – Unleash your inner Picasso by creating and customizing your color presets. Dive into a palette of possibilities, shaping colors for every element – from the body to text and scrollbar.
7. Automatic Dark Mode Based on Sunset – Automatically enable dark mode based on your visitor’s time.
8. Custom CSS Support – With custom CSS you unleash the perfect dark mode version of your website. Customize specific sections/elements exactly how you want in dark mode.
9. ?? Multiple Switch Options – Toggle between different dark mode switch options. Whether you need a menu switch, a floating switch, or a content switch for your posts/page, the power is on your end. Get a distinct switch style for every section.
10. Custom Switch Support with Call-to-Action Customization – Upload a custom switch of your own choice and customize call-to-action text on your dark mode switch.
11. Dark Mode-Based Image Replacement – Replace light-mode images with the different images you want in the dark mode.
12. Dark Mode-Based Video Replacement – If your website has videos, you can replace them with something more fitting for dark mode.
13. ?? Adjust Brightness Level & Apply Grayscale Effect – Adjust your images and video’s brightness level while dark mode is enabled to get an immersive content viewing experience. You can also add a grayscale effect to your images/videos which comes with many health benefits including better sleep and reduced eye strain.
14. Exclude Dark Mode on Certain Pages/Elements – Exclude specific pages/elements from changing into dark mode.
15. Include Dark Mode on Selected Posts & Pages – Exclude all the pages and posts on your website from dark mode except the specific ones (where you want dark mode).
16. Exclude Post Tags & Categories – Exclude all the post tags from dark mode. Keep only the specific tags whitelisted for dark mode.
17. Include Dark Mode on Custom Post Types – You can also enable dark mode only for specific post types, excluding all.
18. Exclude WooCommerce Products & Categories – Exclude all the products and categories on your WooCommerce site from dark mode except the specific ones.
19. Dark Mode Switch in Website Menu – You can display the dark mode switch as a menu item on any menu on your website.
20. Font Size Toggle for Better Accessibility Make your WordPress website more accessible by resizing your font size (increase/decrease).
21. Plenty of Performance Options – WP Dark Mode now comes with multiple performance settings, putting complete control at your fingertips. By using these features, you can improve page loading performance and track dynamic content.
22. Choose Dark Mode Behavior – You can choose between loading dark mode or website content first by selecting these options.
23. Scheduled Email Reporting on Dark Mode Usage – Get daily/weekly reports via email on the dark mode analytics of your website.

??? View Demo | ?? Get the Premium Version

WP Dark Mode works flawlessly across all operating systems including Windows, Android, iOS, and macOS. No additional setups are required. This dark mode plugin intelligently detects device preferences and dynamically delivers a handcrafted, expert-designed dark theme experience for your readers. A quick and easy step to add a dark mode toggle to your website to toggle between dark and light mode anytime you want.

Just activate dark mode on your device, and browse the website to experience a magically transformed dark mode of your website. WP Dark Mode supports all major operating systems including iOS, Android, macOS, or Windows 10. WordPress dark mode is now super easy!

Privacy Policy

WP Dark Mode 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.

Additionally read the WPPOOL privacy policy.

Special Thanks

This plugin includes a modified version of a script from Dark Reader, an open-source browser extension licensed under the MIT license. We thank the Dark Reader team for their contribution to the open-source community. For more information about Dark Reader and their licensing terms, please visit https://github.com/darkreader/darkreader.

Screenshots

Blocks

This plugin provides 2 blocks.

• Dark Mode Switch
• Switcher

Installation

1. After activating the plugin by default your website will turn into a dark theme for your users if the Operating System of the users sets into a dark theme.
2. You can use the show/hide dark mode switch in many different ways like Gutenberg block, Elementor widget, or Shortcode. Please refer to the FAQ section to learn more about how to use it.
3. If you want to disable the OS-aware dark mode functionality, navigate to your Admin Dashboard > Settings > WP Dark Mode and turn off the “Enable OS-aware Dark Mode” switch button.

You can also follow our video tutorial:

FAQ

How can I show the dark mode switch?

You can display a dark mode floating switch button in the footer all over the website by turning on the “Show Floating Switch” settings from the WP Dark Mode general settings.

And in the Ultimate version, you can also display the switch button on the top of every post/ page. You can choose the style of the switch button from different switch styles.

How can I show the Dark Mode ON/ OFF control switch button using a shortcode?

This plugin provides [wp_dark_mode_switch] shortcode to display the dark mode switch. Using the [wp_dark_mode_switch] shortcode, you can place the dark mode switch button anywhere on your website. This shortcode supports an optional style attribute for the switch style.
Example – [wp_dark_mode_switch style="3"]

Does this plugin support any dark mode image?

Yes, it supports dark mode images.

Can we use it with Gutenberg?

Yes, you can place the switch button on any page/post by using the (Dark Mode Switch) Gutenberg block.

Can we use it with Elementor?

Yes, you can place the Dark Mode switch button on any page/post by using the (Dark Mode Switch) Elementor widget.

Can we display the dark mode switch button in any page or post?

Yes, You can display the dark mode switch button before any page/post.

Can we change the dark mode color from predefined presets?

Yes, using the ready-made color schema you can quickly change the dark mode color.

Does dark mode work for the backend page?

Yes, you can enable dark mode on the back end of the admin page.

Where will the dark mode switch button be visible in any page or post?

You can use [wp_dark_mode_switch] shortcode to display the dark mode switch button on any page/post.

Is this plugin compatible with all modern browsers?

Yes, We have tested this plugin in all modern browsers (Safari, Chrome, Firefox, Edge, etc) works without any issue.

Do I need to know any programming language for using this plugin?

No. WP Dark Mode is a very user-friendly and simple plugin. Just download and use it accordingly.

Can I toggle the dark mode/ light mode by using a keyboard?

Yes, You can toggle the dark mode/ light mode by keyboard shortcut (Ctrl + Alt + D).

Reviews

excellent

pfxtrade September 14, 2024

its excellent and work smoothly with my style they keep improving it

Wow, insane performance impact

sx1001 September 11, 2024 1 reply

I’m the guy who digs into code of plugins very often and identifies all the glitches and bad design decisions to improve performance. But what I found here: I couldnt trust my eyes. For every single page load a user does on your page, this plugin does an AJAX call (which in fact means it initializes the whole WP setup a second time in the background including DB connection etc) just to fetch a single option from the DB (which they could just output at the first pageload). So in fact, page load will double because of this INSANE fail of design. Luckily, you can alter the AJAX URL to a non existing one which leads to a fail of AJAX call (i.e. the ajax call will not hit your server again). add_filter( ‘wp_dark_mode_json’, function($localize_scripts){$localize_scripts[’ajax_url’] = ‘any non existing URL here…’;$localize_scripts[’url’][’ajax’] = ‘any non existing URL here…’;return $localize_scripts;}, 10, 1);

good

Pruning6273 September 11, 2024

useful

Everything You Need, Nothing You Do Not

eshm September 2, 2024

WP Dark Mode is a fantastic plugin that does exactly what it promises—instantly creates a dark mode version of your website with no hassle. The setup couldn’t be easier; just activate the plugin, and it automatically adjusts to the user’s operating system preference. The one-click toggle feature is incredibly user-friendly and a perfect addition to any website. Highly recommended for anyone looking to enhance their site’s accessibility and user experience. A must-have plugin!

Bloated and full with upsels

Lex August 21, 2024 1 reply

I just wanted a toogle for enabling dark mode on my admin part of the site so I could work in peace at night, this plugin comes with “shared” analytics, PREMIUM for this, premium for that, everywhere and it slowed both my admin and my front-end.

Does the job nicely

saverios August 20, 2024 3 replies

The plugin is easy to use and does the job in both the site and admin console. I had some issues placing it on the sidebar (I couldn’t get it to centre itself in the column), but nothing a little CSS hack couldn’t fix.

Contributors & Developers

Changelog

5.1.3 – 21 OCT 2024

• New: Added brand new Dark Mode switch for Halloween.

5.1.2 – 01 OCT 2024

• Fix: Rating Notice, and Affiliate Notice’s broken Style.

5.1.1 – 22 SEP 2024

• Fix: Visitors are not logged.
• Improvement: Tweaked performance of WP Dark Mode enhancement.

5.1.0 – 05 SEP 2024

• New: Introduced 2 brand new switches
• New: Added Tab-key accessibility for Dark Mode switches
• Improvement: Improved Elementor Switch selection mode: removed dropdown and added Switch Preview
• Improvement: Unlocked Last 24 hours Analytics report for Free users
• Fix: Conflict with Dokan Pro Plugin resolved
• Fix: Block Editor Dark Mode switches not appearing issue fixed
• Fix: Minor typo corrections

5.0.9 – 8 AUG 2024

• New (Device-wise Dark Mode Toggle): Control the switch visibility on different devices – easily choose where to display the dark mode switch: Desktop, Mobile, or Tablet.
• Improvement: Added compatibility with Twenty Twenty Four theme.
• Improvement: Added compatibility with Jetpack and Jetpack CRM.

5.0.8 – 15 JUL 2024

• Fix: Conflicts with common CSS libraries like Bootstrap etc.

5.0.7 – 01 JUL 2024

• Improvement: Improved compatibility with Virtue theme; Fixed full-width theme support.
• Fix: Animations are not smoothly appearing when Dark Mode is ON.
• Fix: WP Dark Mode encounters error in Widgets.

5.0.6 – 10 JUN 2024

• New: Introduced “Exclude WP Dark Mode from Caching” feature to maintain compatibility with Server-side cache technologies.
• Fix: Excluding all taxonomies except some specifics are not working.
• Fix: Images are not appearing properly in Dark Mode.
• Fix: Dark Mode colors are not applying properly in GeneratePress theme.
• Fix: Incompatibility with Multi-site.
• Fix: Updated Twitter Icon to X.
• Fix: Frontend Toggle Switch misfires sometimes.

5.0.5 – 02 JUN 2024

• Fix: Security issue regarding Social Share Settings.

5.0.4 – 18 APR 2024

• Fix: Rating Notice will be hidden per user preference.
• Fix: Fixed conflicts with Sheets to WP Table Live Sync plugin.

5.0.3 – 24 MAR 2024

• Fix: Fixed minor issues

5.0.2 – 20 MAR 2024

• New: Introduced “Default Light Mode” feature in Frontend settings.
• Improvement: Enhanced Spectra theme compatibility.
• Fix: Resolved color presets forcefully hiding images.
• Fix: Resolved decreasing Menu Switch default size.
• Fix: Addressed the restriction allowing only image files for Custom Switch icon uploads.
• Fix: Resolved the issue where the switch Icon Style Preview broke when administrators changed the style in settings.

5.0.1 – FEB 28 2024

• Fix: Dark Mode colors now correctly override default colors when Automatic Mode is ON.
• Fix: Header images disappear on some templates and themes.
• Fix: Dark Mode is not applied automatically when System Dark Mode is ON.

5.0.0 – FEB 20, 2024

• New (Introduced New UI ??): We’ve revamped the WP Dark Mode’s look and feel, making the admin panel more modern and user-friendly.
• New (Added Preset Color Customization): Admins can now customize all the color presets, giving more control over the website’s appearance.
• New (Introduced Custom Color Preset): The admin can create unlimited custom color presets and change the color of the website elements including body, link, text, button, scrollbar, and many more.
• New (Media Color Correction): The brightness and grayscale effect of images and videos are now adjustable. Also, the admin can exclude specific images and videos from being affected by these settings.
• New (Shortcode Helper): Without any prior coding knowledge now admin can choose among different switches, and copy and paste the shortcode into their posts, pages, and widgets.
• Improvement (Enhanced Performance Mode): Performance mode is the mechanism of how the WP Dark Mode script executes in the front end. Now admin can choose performance mode according to their preference and keep their website healthy, smooth, and secure.
• Improvement (Customizable Typography Settings): Typography can be now customizable to adjust the font size of accessibility switches. No more static font size ratio.
• Fix(Flashing/blinking Issue on Frontend): The flashing issue while page loading has been fixed. The dark mode transition is now much smoother while using the floating switch or switching between pages.
• Fix(Theme Compatibility): WP Dark Mode is compatible with thousands of WordPress themes and plugins by default. However, we have fine-tuned each element for the most popular WordPress themes and plugins like, Neve, Astra, Divi, GeneratePress, Customizr, Phlox, Hello Elementor, Avada, The7, ColorMag, OceanWP, Photogragh, Betheme, Flastsome, BuddyBoss Theme and Platform, Spacious, Responsive, Hestia, and many more.

4.2.9 – JAN 29 2024

• [Improvement] Added smooth upgrading bridges for beta release.
• [Fixed] Upgraded all ultimate features for premium users.

4.2.8 – JAN 01 2024

• [Fixed] Affiliate Notice appears after closing.
• [Fixed] Dark Mode Videos are not applying on initial page load.

4.2.7 – DEC 21 2023

• [Fixed] Fixed ‘Settings page blank’ issue for high-performing websites

4.2.6 – NOV 08 2023

• [Fixed] Checked compatibility with WordPress 6.4

4.2.5 – NOV 02 2023

• [Fixed] Fixed Fatal Error calling set_campaign method on null

4.2.4 – OCT 25 2023

• [Fixed] Minor issues & bugs

4.2.3 – SEP 20 2023

• [Fixed] Multi-site compatibility
• [Fixed] Dark Mode switch appears on Gutenberg Block Editor
• [Fixed] Dark Mode color palettes on Block Editor Toolbar

4.2.2 – SEP 5 2023

• [Fixed] Fixed exclude posts and pages

4.2.1 – AUG 10 2023

• [Improvement] Checked and improved compatibility with WordPress 6.3

4.2.0 – July 6 2023

• [Fixed] Dark Mode switch label typography style

4.2.0 – July 6 2023

• [Fixed] Dark Mode switch label typography style

4.1.9 – July 5 2023

• [Fixed] Dark Mode toggler inside Block Editor
• [Fixed] Button and Icon color contrast ratio
• [Fixed] Spelling mistake on changelogs
• [Fixed] Mismatch between switch element accessibility

4.1.8 – June 19 2023

• [Fixed] Fixed license integration for Ultimate Single Site
• [Fixed] Restored front-end css map

4.1.6 – June 06 2023

• [Fixed] Minor issues & bugs

4.1.5 – May 02 2023

• [Fixed] Dark mode images not saving on Ultimate Single Site
• [Improvement] Added special thanks to core script contributor
• [Improvement] Enhanced readme assets for better visualization

4.1.4 – April 12 2023

• [Improvement] Enhanced readme assets for better visualization

4.1.3 – April 05 2023

• [Fixed] Admin notices for reviews will not be appear again once it’s closed
• [Fixed] Minor issues & bugs

4.1.2 – April 03 2023

• [Fixed] Minor issues & bugs
• [Improved] Dark mode image performance
• [Improved] Reverted old promotional popup mechanism

4.1.1 – MAR 28 2023

• [Improve] Checked compatibility with WordPress 6.2
• [Fixed] Minor issues and improved performance

4.1.0 – MAR 20 2023

• [Fixed] dismissable notice for Affiliate program

4.0.9 – MAR 14 2023

• [Fixed] Alert modal position fixed. Now alert will be shown top with highest zindex.
• [Fixed] Checked and fixed some of the old files compatibility with php 5.6

4.0.8 – FEB 28 2023

• Fix: Fixed blinking/lightening on frontend.
• Fix: Fixed RTL support for both frontend and backend.
• Fix: Fixed import/export functionalities. Now custom CSS can be imported and exported.
• Improve: Improved shortcode section, checked and fixed backward compatibility.

4.0.7 – FEB 22 2023

• Removed Sweetalert2 and added custom alert functionality
• Reverted RTL support
• Fixed minor issues and improved performance