Erik

Dark Mode Block is a simple yet powerful WordPress block plugin that allows you to enable dark mode for your website, enhancing readability and reducing eye strain without altering your website’s colors. Give your users the flexibility to switch between light and dark modes seamlessly. 
Designed to be lightweight and efficient the whole frontend script weights less than half of a kb gzipped 😉
Features: 
– Toggle dark mode with a user-friendly icon. 
– Preserve your website’s color scheme while improving readability in low-light environments. 
– Enhanced user experience with reduced eye strain. 
– Customizable
Make your website more accessible and user-friendly by offering a dark mode option. With Dark Mode Block, your users can enjoy your content without compromising on aesthetics.
<h3>Usage</h3>
<ol>
<li>After activating the plugin, add the “Dark Mode” block to your WordPress page or post editor.</li>
<li>Publish or update your content.</li>
</ol>
<h3>Customization</h3>
Unleash your creativity! This block is designed to be fully customizable graphically, and since it’s entirely CSS-based, it’s straightforward for anyone to modify and adapt it according to their own taste or template.
You even have control over how the dark mode is applied! Currently, I’ve applied an invert filter on the background as I don’t know the variables in your template. 
However, you have the flexibility to make it even better by setting the text color as the background and vice versa.
Here’s how to do it:
<ol>
<li>Add the following code to your functions.php file.</li>
<li>Edit the $custom_css in order to fit your preferences</li>
</ol>
First dequeue the current style in this way:
<pre><code>add_action( 'wp_enqueue_scripts', function () {
 /** dequeue the default dark mode */
 wp_dequeue_style( 'codekraft-dark-mode-style' );
}, 9 );
</code></pre>
Then add yours!
<pre><code>add_action( 'wp_head', function () {
 /** @var {string} $custom_css - your custom css for the dark mode */
 $custom_css = "html.dark-mode body {
 --wp--preset--color--background: #232323;
 --wp--preset--color--foreground: #f3f3f3;
 }
 .dark-mode-switch::before {
 width: 1.6rem;
 cursor: pointer;
 display: flex;
 font-size: 1.6rem;
 line-height: 1.6rem;
 content: '🌞'
 }
 .dark-mode .dark-mode-switch::before {
 content: '🌚'
 }";
 echo "<style id='dark-mode-custom'>$custom_css</style>";
}, 20 );
</code></pre>
Please support the plugin posting your custom style and a screenshot in the WordPress support forum section!

Dark Mode Block

Dark Mode Block is a simple yet powerful WordPress block plugin that allows you to enable dark mode for your website, enhancing readability and reduci …

WPCommerz

Darklup

Mahbubur Rahman

Change the appearance of your WordPress website aesthetically by activating the most user-friendly plugin – Darklup within a few moments.
👓 Dark mode reduces damages from bright screen lights and grants up to 70% eye protection.
📋 Turn any WordPress website into an eye-pleasing reading experience by simply activating Darklup.
Darklup – The Best WordPress Dark Mode Plugin has numerous essential features for optimizing dark mode for WordPress website owners. Enable a visually stunning dark interface without facing any hassle with the help of Darklup’s flexible and user-friendly functions.
This essential dark mode plugin has been built based on advanced and smart artificial algorithms. It can automatically analyze the structure of the website and intelligently implement dark mode without creating any complications in the website design.
The smart color sensitivity adjusts the color contrast according to user preference. Boost productivity without affecting your eyes. Also, you can use pre-generated 12 color presets for multiple dark mode designs
<h3>Why Choose Darklup?</h3>
Choosing the best WordPress dark mode plugin can make your website user experience more appreciable. Darklup has unique dark mode optimization features that are efficient to improve the bounce rate of your website. It is also helpful for the visitors to keep safe from blue light exposure.
We are glad about some user reviews of our plugin – 
@<a href="https://wordpress.org/support/topic/happy-with-this-plugin-37/" rel="ugc">artlover1</a> ⭐⭐⭐⭐⭐
<blockquote>“I am using darklup for last 1 month and it works good. faced some problems in sections thats are looking weired. then i contact on customer support and they fixed my issues. all the best team”</blockquote>
@<a href="https://wordpress.org/support/topic/good-but-very-limited-on-free-version-and-has-issues-with-switch/" rel="ugc">pherojoe</a> ⭐⭐⭐⭐⭐
<blockquote>“I initially had some problems with the free version, but it is BY FAR the best looking dark mode plugin available, so I bought the premium version as I had some minor issues. But the developer was responsive even over xmas holidays and fixed them within a few days. Highly recommended!”</blockquote>
@<a href="https://wordpress.org/support/topic/the-best-dark-mode-plugin-for-your-wp-website/" rel="ugc">Ronen</a> ⭐⭐⭐⭐⭐
<blockquote>“with lot’s of options to custom your button, the color and much more, great support for any issues, working great on my websites!”</blockquote>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Rg_LeF3KFF4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
👁️ <a href="https://darklup.com/" rel="nofollow ugc">Demo</a> | 🚀 <a href="https://darklup.com/pricing/" rel="nofollow ugc">Get Pro</a> | 👨‍💻 <a href="https://darklup.com/my-account/support-tickets/" rel="nofollow ugc">Get Support</a>
<h3>🌟 WordPress Dark Mode Plugin Free Features:</h3>
<ol>
<li>Dark Mode Elementor Widget: Dark mode Elementor widget allows you to set the dark mode switch button in any post or page and customize your website entirely.</li>
<li>Dark Mode Gutenberg Widget: Using the dark mode switch Gutenberg widget, you can place the dark mode switch button in any page or post as your demand.</li>
<li>Dark Mode WP Widget: Darklup will allow you to easily enable WP widgets without any difficulty.</li>
<li>Frontend Dark Mode: Enable the dark mode function for the frontend portion of your WordPress website.</li>
<li>Backend Dark Mode: Enable the dark mode function for the admin panel of your WordPress website.</li>
<li>Time-Based Dark Mode: You can easily turn on automated dark mode based on your preferred time. Also, you can set up start and end times.</li>
<li>Floating Switch Button: You can add and enable floating switch buttons anywhere on your website.</li>
<li>Re-Positioning Floating Switch: The floating switch can be displayed at the top right, top left, bottom right, and bottom left on your webpage. Customize the floating switch margin to top, bottom, left, and right.</li>
<li>OS-Based Dark Mode: Almost all leading operating systems support Darklup plugin for showing the dark mode color scheme.</li>
<li>3+ Exclusive Color Presets: More than 3+ exclusive color presets for admin and dashboard which are obtainable to adorn the website with proper balanced color.</li>
<li>4+ Exclusive Switch Styles: More than 4 exclusive switch styles are available to enrich the productivity of a website.</li>
<li>Ready for Translation ( .pot files included): You can translate from the predefined language to your required language because .pot file is included in this plugin to serve you in your native language.</li>
<li>Keyboard Shortcut: Easy to turn ON or OFF dark mode using Ctrl+Alt+D. Keyboard Shortcut works on both Frontend and Backend of the site.</li>
<li>Dynamic Dark Mode: Dynamic dark mode will allow you to enable auto-generated dark mode. It utilizes an intelligent, dynamic algorithm to effortlessly generate stunning dark-mode color schemes for your website.</li>
<li>Add Overlay to all Background Images: Enable the overlay option to add a visually appealing effect to all background images, enhancing their appearance without the need for image replacement.</li>
<li>Proper Image Optimization: Easily adjust multiple factors (brightness, contrast, opacity, sepia) of your website images to make it visually clear and user-friendly in dark mode settings.</li>
<li>Set Button Location: You can display the dark mode switch button anywhere on the website as you and your user demand.</li>
<li>Remember Last Time Mode: Remember the mode that you or the audience have used last time and activate the mode according to the last accessing mode automatically.</li>
<li>Set Button Size: You can change the dark mode switch button size. Floating Switch can be scaled to increase or decrease size maintaining the aspect ratio.</li>
<li>Switch Preview: You can see the Floating Switch live preview on Plugin Back-end.</li>
<li>Well Documented: You can find the full-fledged information and proper installation guide in the “documentation” section of the Darklup plugin.</li>
<li>Exclude from Caching: You can prevent Darklup from being cached by plugins like WP Rocket and others.</li>
</ol>
Exclude from Caching: You can prevent Darklup from being cached by plugin like WP Rocket and others.
Prevent Darklup from being cached by plugin like WP Rocket and others.
Helps avoid dark mode conflicts on sites using server-side caching tools like LiteSpeed or WP Rocket by optionally excluding Darklup from being cached.
<h3>🔥 WordPress Dark Mode Plugin PRO Features:</h3>
<ol>
<li>Exclude WooCommerce Products & Categories: To enrich your WooCommerce website, this feature allows you to show the dark mode switch button on some product and category. So, you can exclude or include any product or category to show the dark switch button.</li>
<li>Triggering Dark Mode Setting: This amazing feature will let you select particular pages,posts and categories where you don’t want to show the dark mode switch.</li>
<li>Custom CSS Supported Dark Mode: You can edit the specific sections of your WordPress website with custom CSS support in dark mode.</li>
<li>Shortcode integration: You can insert a shortcode [darklup_darkmode_switch] to change the location of the dark mode switch button.</li>
<li>Color Customization: Independently customize the color of various sections of your website such as background color, link color, hover color, etc.</li>
<li>Schedule Dark Mode: Set the WordPress dark mode activation time according to your local time and enjoy the automatic activation of dark mode on the website.</li>
<li>Switch Background Color: You can also customize switch the background color based on your website design and brand identity.</li>
<li>Dark Mode Menu Switch: You can select a menu to display the dark mode switch button beside the menu.</li>
<li>Border Color: Provide different border colors to decorate your website in dark mode.</li>
<li>Link Hover Color: Customize the link hover color to make the link more navigable to the website visitors.</li>
<li>Dark Mode Font Size Kit: You may feel the necessity to change the text’s font size to cope up with your website and this feature will allow you to change the font size.</li>
<li>Exclude Elements: You can avoid a particular element or portion to display the dark mode switch button by selecting the class, div, id of your website.</li>
<li>Replace Logo in Dark Mode: You can wisely change your dark or light logo as you want. We have added an option to upload logos for both dark and bright version.</li>
<li>New Accessibility Switch Added: New switch buttons of various styles have been added. These new switch styles will surely help you to attract your audience.</li>
<li>WooCommerce Compatibility Added: Darklup plugin is fully compatible with the WooCommerce platform to change the appearance of product and category pages.</li>
<li>Default Dark Mode: You can set dark mode as your default color scheme for your website. That means your users never need to switch from bright to dark. They will see dark mode by default.</li>
<li>Floating Switch Customization: Darklup has a floating switch customization option. You can customize it as you want. You can customize the switch with icons, backgrounds, and color pallets.</li>
<li>Switch Tooltip Setting: Tooltip allows you to alert your user to use this feature if they want. You can use any customized text.</li>
<li>Switch Animation: Switch animation to make the floating switch appear in a stylish way. Choose between multiple animation styles.</li>
<li>Usage Analytics: Get an overview of Darklup usage report on Dashboard widget as well as scheduled report via email.</li>
<li>Display Floating Switch in Desktop: Display floating switch in desktop allows you to display the floating switch in every desktop screen. </li>
<li>Display Floating Switch in Mobile: Enable display floating switch in mobile and a floating switch that enables dark mode will stick around in mobile screen.</li>
<li>Draggable Switch: You can drag the dark mode button to a desired position on the screen to make it easier to use. The option is available for both iOS and Android.</li>
<li>Dark Mode Intensity: Adjust the dark mode intensity for your website by selecting a desired level. The website background will become darker as you increase the value. At 100%, the background color will be completely dark. Implementing this adjustment can significantly enhance the visual aesthetics of your website. Surprisingly, you may not need to replace any existing images on your website to look good in dark mode.</li>
<li>Exclude Background Image Overlay: When ‘image overlay’ enabled, all background images receive an overlay in dark mode. You can remove the overlay from a specific element by providing the class or ID of that element.</li>
</ol>
👁️ <a href="https://darklup.com/" rel="nofollow ugc">Demo</a> | 🚀 <a href="https://darklup.com/pricing/" rel="nofollow ugc">Get Pro</a> | 👨‍💻 <a href="https://darklup.com/my-account/support-tickets/" rel="nofollow ugc">Get Support</a>
<h3>🔥 MORE PREMIUM VERSION FEATURES:</h3>
<ol>
<li>Advanced Custom Color Picker</li>
<li>WCAG standard circular color palette</li>
<li>Font Size Kit for dark mode</li>
<li>WooCommerce support & features</li>
<li>Custom CSS for developers and pro users</li>
<li>Image property customization (brightness, contrast, opacity) on target webpage</li>
<li>Essential Shortcodes</li>
<li>Background color switcher with lots of amazing colors</li>
<li>Color Mode Reminder for better user experience</li>
<li>In-Menu Switch, Border Color, Image Opacity options included</li>
<li>Hover Color setting for Links</li>
<li>Page & Post Selection, use dark mode only where you need</li>
<li>Exclude Elements to avoid dark mode in specific places by CSS ID</li>
</ol>
<h3>🔥 DARKLUP FEATURED BY TOP REVIEWER:</h3>
Lot of love by DecisiveMarketer.
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Kr69mnLCHDI?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3> Learn More:</h3>
<ol>
<li> <a href="https://darklup.com/enable-dark-mode-for-wordpress-dark-mode-for-wordpress/" rel="nofollow ugc">5 Easy Steps to Enable Dark Mode for WordPress</a></li>
<li> <a href="https://darklup.com/cracked-wordpress-plugins/" rel="nofollow ugc">Looking for Darklup-WP Dark Mode Nolled Version? Beware of Cracked WordPress Plugins</a></li>
<li> <a href="https://darklup.com/best-ways-of-decreasing-bounce-rate-with-dark-mode/" rel="nofollow ugc">Best ways of decreasing bounce rate with Dark Mode – Darklup</a></li>
</ol>
<h3> 🎉 Whats Next</h3>
By the way, we also have multiple essential plugins for WooCommerce stores. You can use these plugins to grow your Woocommerce business more efficiently.
✳️ <a href="https://wordpress.org/plugins/guidant/" rel="ugc">WP Guidant</a> – With the help of WP Guidant, WooCommerce website owners can easily create multi-step guided selling process for the customers. It will enhance the conversion rate more efficiently.
✳️ <a href="https://wordpress.org/plugins/wceazy/" rel="ugc">wcEazy – Supercharge your WooCommerce Store</a> – All-in-one solution WordPress plugin for optimizing WooCommerce store. Access several modules and increase the sales of your store.
<h3>❤️ LOVED DARKLUPLITE?</h3>
<ol>
<li>Join our <a href="https://www.facebook.com/wpcommerz" rel="nofollow ugc">Facebook Group</a></li>
<li>Learn from our tutorials on <a href="https://www.youtube.com/channel/UCwbKkyju-e6bCkR0qQUUPZQ" rel="nofollow ugc">Youtube Channel</a></li>
<li>Or rate Darklup on <a href="https://wordpress.org/support/plugin/darklup-lite-wp-dark-mode/reviews/" rel="ugc">WordPress</a></li>
</ol>
<h3>Privacy Policy</h3>
Darklup WP Dark Mode uses <a href="https://appsero.com" rel="nofollow ugc">Appsero</a> 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 <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.

Darklup – Enhanced WordPress Dark Mode, Dark Theme, Night Mode Plugin


I've used Darklup on my site, and I'd like to emphasize the efficiency of customer support, which has solved every problem I've encountered. I recommend Darklup


The support is great

Experience Darklup — Your WordPress ally for dark mode, dark themes, and night mode. Switch to an eye-friendly dark view.

Dark Mode Block vs Darklup – Enhanced WordPress Dark Mode, Dark Theme, Night Mode Plugin