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 …

Mahbubur Rahman

Darklup

WPCommerz

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 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.
♿ Starting with version 4.0, Darklup also includes a built-in accessibility panel giving your visitors the tools to adjust how they read, see, and navigate your website, without any extra plugins.
<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.

With the newly added web accessibility plugin, Darklup now goes a step further. Your visitors including those with low vision reading difficulties or motion sensitivity can adjust contrast font size and reading aids directly from your site’s frontend. Better accessibility means more visitors can actually use your site not just see it.
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/pricing/" rel="nofollow ugc">Get Pro</a> | ♿ <a href="https://darklup.com/accessibility/" rel="nofollow ugc">Accessibility Features</a>
<h3>🌟 WordPress Dark Mode Plugin Free Features:</h3>
<ul>
<li>Dynamic Color Mode: Darklup analyzes every element on your website and automatically applies the right dark color to each backgrounds, text, buttons and images. It works per-element using a smart luminance-based algorithm, so your website looks polished in dark mode without any manual color adjustments. No configuration needed to get started.</li>
<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>15+ Exclusive Switch Styles: More than 15 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>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>Exclude from Caching: You can prevent Darklup from being cached by plugins like WP Rocket and others.</li>
</ul>
<h3>♿ Accessibility for your WordPress Website</h3>
Darklup now includes a built-in accessibility panel. Activate it from your Switch Styles settings and a clean, organized toolbar appears on your website. Your visitors can use it to adjust how they read and experience your content, without needing any extra help.
<h4>Key Capabilities:</h4>
<ul>
<li>Accessibility Modules: Enable or disable specific accessibility modules based on your website’s design needs. You stay in full control of what your visitors see.</li>
<li>Toolbar Customization: Adjust the accessibility toolbar position bottom left or bottom right and display it separately on desktop, tablet and smartphone.</li>
<li>Custom Branding: Set your own accent color and button size to match your website identity. The panel looks like it belongs on your site.</li>
<li>Visitor Preferences Saved: Each visitor’s accessibility settings are remembered across every page and every visit without requiring an account.</li>
<li>Zero Performance Impact: Accessibility assets only load when the Accessibility Switch is selected in your settings. If you use any other switch style, there is no extra load on your website.</li>
</ul>
<h4>Accessibility Modules:</h4>
<ul>
<li>Dark Mode: Allow visitors to switch your website to dark mode directly from the accessibility panel.</li>
<li>Contrast: Give visitors three contrast options dark, light and high contrast — to suit their visual comfort.</li>
<li>Bigger Text: Let visitors increase the text size across your website for easier reading.</li>
<li>Readable Font: Switch website fonts to a clean, easy-to-read typeface at the click of a button.</li>
<li>Highlight Links: Make all links clearly visible by highlighting them so visitors can navigate without difficulty.</li>
<li>Stop Animations: Pause all website animations and transitions to help visitors who are sensitive to motion.</li>
<li>Monochrome: Remove all color from your website and display it in grayscale for visitors who prefer it. (Pro ♛)</li>
<li>Font Weight: Make website text bolder and easier to read at a glance. (Pro ♛)</li>
<li>Align Text: Let visitors choose their preferred text alignment — left, center or right. (Pro ♛)</li>
<li>Reading Mask: Help visitors focus on one section of your page at a time with a reading line overlay. (Pro ♛)</li>
<li>Hide Images: Remove all images from the page to reduce distraction and improve reading focus. (Pro ♛)</li>
</ul>
🚀 <a href="https://darklup.com/pricing/" rel="nofollow ugc">Get Pro</a> | ♿ <a href="https://darklup.com/accessibility/" rel="nofollow ugc">Accessibility Features</a>
<h3>🔥 WordPress Dark Mode Plugin PRO Features:</h3>
<ul>
<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 the switch 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>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>
</ul>
🚀 <a href="https://darklup.com/pricing/" rel="nofollow ugc">Get Pro</a> | ♿ <a href="https://darklup.com/accessibility/" rel="nofollow ugc">Accessibility Features</a>
<h3>🔥 MORE PREMIUM VERSION FEATURES:</h3>
<ul>
<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>
</ul>
<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>
<ul>
<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>
</ul>
<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>
<ul>
<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>
</ul>
<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 & Accessibility 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, night mode and accessibility. Switch to an eye-friendly more inclusive web experi …

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