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 …

Mahbub Hasan Imon

Golam Mostafa

Rony Mia

Sayemur Rahman

Kazi Sayed

AbdurRahamanWP

DroitThemes

<a href="https://droitthemes.com/droit-dark-mode/" rel="nofollow ugc">Droit Dark Mode</a> Plugin is a great way to create a stunning dark version of your website and dashboard – easily and effectively. This WordPress Plugin allows you to turn enable/disable the dark mode option from the dashboard with tons of settings. It enables you to turn on/off dark mode in your website without lots of efforts, hassle or coding.
This WordPress dark mode plugin is very much user friendly, fully compatible to all browsers, operating systems and devices.
👁️ <a href="https://demos.droitthemes.com/droit-dark-mode/" rel="nofollow ugc">View Demo</a> | 👑 <a href="https://droitthemes.com/droit-dark-mode/" rel="nofollow ugc">Get The PRO Version</a> | 👍 <a href="https://droitthemes.ticksy.com/" rel="nofollow ugc">Get Support</a>
<h3>Droit Dark Mode Free Features</h3>
<ol>
<li>Multiple Switch Styles – Comes with multiple switch styles that you can choose from and use on your website</li>
<li>Floating Switch Button – Floating switch button can be shown anywhere in the body of your website.</li>
<li>Set Default Mode – You can set the dark mode in your website as the default (first time) view.</li>
<li>Switch Elementor Widget – Switch Button can be placed on the content of any post/page by using the Elementor widget.</li>
<li>Switch Gutenberg Block – Switch Button can be placed on the content of any post/page by using the Gutenberg block.</li>
<li>Dashboard Dark Mode – Your WordPress admin panel/dashboard can also be made dark.</li>
<li>Multiple Color Presets – 10+ exclusive color presets are available to quickly change the dark mode color from the color palette.</li>
<li>Dark Mode Saved – Your choice of dark/light mode is saved by default once you set which mode to turn on.</li>
<li>Theme Compatibility – Dark Mode plugin is compatible with all major themes out in the market, so you are well covered!</li>
<li>Set Dashboard Color Preset – You can set color preset for dark and light admin dashboard based on your browser.</li>
<li>Body Position Options – Set switch at different positions in your websites (left-top, left-bottom, right-top. right-bottom, center-bottom, center-top and so on).</li>
</ol>
<h3>👑 Droit Dark Mode Pro Features</h3>
<ol>
<li>All features of free version</li>
<li>Image Brightness – Increase/decrease brightness of images in your website.</li>
<li>Image Opacity – Increase/decrease opacity of images in your websites.</li>
<li>Image Contrast – Increase/decrease contrast of images in your website.</li>
<li>Specific Page – You can enable/disable dark or night mode and set different color palette on individual pages.</li>
<li>Specific Post – You can enable/disable dark mode and set different color palette on individual posts.</li>
<li>Specific Category – You can enable/disable dark mode and set different color palette on individual categories.</li>
<li>Specific WooCommerce Products – You can enable/disable dark mode and set different color palette on individual products.</li>
<li>Specific Content – Display the dark mode switch button before/after content for any kind of page/post type.</li>
<li>Set Timer For Dark Mode – Dark mode will be turned on or off based on the time you set.</li>
<li>Dark Mode Using Shortcode – Use [drdt_dark_mode] shortcode to display the dark mode switch button on anywhere of your websites.</li>
<li>Dark Mode Switch Widget – Using the Droit Dark Mode Widget you can place the dark mode switch button.</li>
<li>Different Images For Dark Mode – You can set different images for dark mode and light mode separately.</li>
<li>Add Button To Primary Menu – You can add Dark Mode switch button into the primary menu.</li>
<li>Exclude Specific Elements – Using the CSS selectors you can exclude specific elements that are affected by the dark mode.</li>
<li>Include Specific Elements – Similarly, using the CSS selectors you can include specific elements that are affected by the dark mode.</li>
<li>Custom Color – You can set custom color for all headings, paragraphs, links, buttons and other UI elements.</li>
<li>Custom Switch Text – You can customize the dark/light text of the Dark Mode switch.</li>
<li>OS-based Dark Mode – Get dark mode instantly, Droit Dark Mode automatically detects the dark mode enabled on your OS and switches it on your website automatically.</li>
</ol>

Droit Dark Mode

Droit Dark Mode Plugin is a great way to create a stunning dark version of your website and dashboard - easily and effectively.

Dark Mode Block vs Droit Dark Mode