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 …

quomodosoft

Rayhan Uddin

QS Dark Mode is a simple yet convenient plugin that allows WordPress websites to turn on a Dark Mode website or theme. This WordPress QS Dark Mode plugin is very much user friendly, fully compatible to all browsers, operating systems and devices. It is also compatible with all WordPress themes
QS Dark Mode is a plugin which allows you to turn on the Dark Mode in your WordPress website. Dark Mode theme/website can be turned OFF or ON using a prominently displayed toggle icon on the screen or even from them Plugin Settings
The most amazing Dark Mode plugin is QS Dark Mode . It provides a huge number of features to make you and your WordPress website visitors more comfortable. Accessing procedure of this plugin is very easy. You just need to install and activate the plugin for your WordPress website. You will find all the features here below:
<a href="https://quomodosoft.com/plugins/qs-dark-mode/" rel="nofollow ugc">👁️ View Demo</a> | <a href="https://quomodosoft.com/plugins/qs-dark-mode/" rel="nofollow ugc">🚀 Get The PRO Version</a> | <a href="http://help.quomodosoft.com/" rel="nofollow ugc">👩🏼‍💻 Support</a>
<h3>QS Dark Mode Plugin FEATURES</h3>
<ul>
<li>Dashboard Color Scheme : – QS Dark Mode bring the option customize your WordPress dashboard with a click.</li>
<li>Default Dark Mode : You can also set Default Dark Mode from your dashboard for your website with QS Dark Mode .</li>
<li>Front End Dark Mode : To active Dark Mode in Front End We have bring QS Dark Mode and Now you are all set to enjoy the Dark Version of the website</li>
<li>Dashboard Dark Mode : To change the WordPress Dashboard to a Dark Mode or version You can use QS Dark Mode .</li>
<li>Switch : Showcase your stylish switch style and bring a posh look to the website. QS Dark Mode has it all.</li>
<li>Short Code : QS Dark Mode is compatible with all page builder even with WordPress itself, so use short code to make it work.</li>
<li>Switch Presets : – We have 4 Switch Presets in our Free version to convert your website in Dark Mode .</li>
<li>Switch Style : QS Dark Mode Provide different style for the switch and it can be your won as well. </li>
<li>Switch Position : You can set the button /switch anywhere you want with the QS Dark Mode Positioning options.</li>
<li>Switch Custom Style : it’s much easier to have your own switch style in your website.</li>
<li>Switch Custom Text : Place your text on the button as per your wish.</li>
<li>Theme Color Presets : – 4 Color Scheme for your theme is ready with the QS Dark Mode WordPress Plugin.</li>
<li>Custom Elements : You can also give style to your custom elements with QS Dark Mode </li>
<li>Exclude Elements : You have the option to exclude any specific area or elements from your website with QS Dark Mode .</li>
<li>Custom CSS : to target specific content or id even class, QS Dark Mode give you the authority to make it happen.</li>
<li>Image Opacity : To make a proper contrast you can also choose image opacity. </li>
<li>Image Filter : There are few options is QS Dark Mode to control the image filter or to change the filter type.</li>
<li>Keyboard Shortcut : You can now change darkmode switch using Keyboard shift + D.</li>
</ul>
<a href="https://quomodosoft.com/plugins/qs-dark-mode/" rel="nofollow ugc">👁️ View Demo</a> | <a href="https://quomodosoft.com/plugins/qs-dark-mode/" rel="nofollow ugc">🚀 Get The PRO Version</a> | <a href="http://help.quomodosoft.com/" rel="nofollow ugc">👩🏼‍💻 Support</a>
<h3>QS Dark Mode Plugin Pro Features</h3>
<ul>
<li>All Free QS Dark Mode Features</li>
<li>Switch Presets : With stunning premade design of QS Dark Mode switch you can enjoy the beauty of this plugin</li>
<li>Switch Custom Image : Change the Image in the Switch with QS Dark Mode </li>
<li>Switch Custom Style : Its Not necessary that you have to use our presets or style. Its always Open to create your own Switch style with QS Dark Mode </li>
<li>Theme Preset Box Shadow : With a premade options, you can use the box shadow on your theme presets.</li>
<li>Custom property color : Specific area or property can also customize with custom property color option in QS Dark Mode .</li>
<li>Image Swap : You can swap image for Dark Mode screen as your wish.</li>
<li>Image Compare : Now you can compare or show the image compare with QS Dark Mode .</li>
<li>Exclude Dark Mode Feature : If you want you can Skip Dark Mode features in specific Page with QS Dark Mode </li>
<li>Exclude Custom CSS in Specific Page : To deal with your own person choice you can also Excluse some Custom CSS in your QS Dark Mode WordPress Plugin.</li>
<li>Schedule Dark Mode : Just schedule your proffered time and take rest, QS Dark Mode will automatically convert the website UI in to Dark Mode .</li>
<li>Above Post Placement : Place anywhere you want it to be like you can also post above or after the post and pages.</li>
<li>WooCommerce Shop : We have also define the WooCommerce shop page default style with QS Dark Mode .</li>
<li>WooCommerce Product Details Page : QS Dark Mode also work on WooCommerce Default product details page with its default system.</li>
<li>Floating Switch Options : You Switch can now float anywhere of the website with QS Dark Mode Floating Switch Options.</li>
<li>Re-positioning floating switch : Give a suitable position to your Button/Switch with QS Dark Mode WordPress Plugin.</li>
<li>Elementor Dark Mode Widgets : QS Dark Mode supports Elementor as we have Short Code Options and you can use it as Elementor Widgets.</li>
<li>OS Based Dark Mode : When Operating systems in Dark Mode Plugin will automatically change to dark mode.</li>
<li>Cookie : Dark Mode settings will save in user browser.</li>
<li>Switch In Menu : You Can Show Dark Mode switch in header menu area or any menu area.</li>
<li>Swicth Keyboard : You can now change switch button using keyboard shortcut key.</li>
<li>Visual Composer Dark Mode Widgets : QS Dark Mode supports Visual Composer as we have ShortCode Options and you can use it as Visual Composer Widgets.</li>
<li>Well Documented : With a beautiful UI & UX we have bring a easy Navigation Dashboard for the users of QS Dark Mode WordPress Plugins and its well Documented.</li>
</ul>
<a href="https://quomodosoft.com/plugins/qs-dark-mode/" rel="nofollow ugc">👁️ View Demo</a> | <a href="https://quomodosoft.com/plugins/qs-dark-mode/" rel="nofollow ugc">🚀 Get The PRO Version</a> | <a href="http://help.quomodosoft.com/" rel="nofollow ugc">👩🏼‍💻 Support</a>
<h3>OUR OTHER PLUGINS</h3>
You can also check our other WordPress plugins:
<a href="https://wordpress.org/plugins/element-ready-lite" rel="ugc">ElementsReady</a> – Elements Ready Elementor Addons With Header & Footer Builder
<a href="https://wordpress.org/plugins/shopready-elementor-addon" rel="ugc">ShopReady</a> – ShopReady – WooCommerce Builder for Elementor, Products Compare, UpSell, Variation Swatches, Wishlist, QuickView

QS Dark Mode Plugin

i was using the plugin for last few days, i got surprised by the plugin. 
it work very well.

Amazed by this

Features & Flexibility

QS Dark Mode is a simple yet convenient plugin that allows WordPress websites to turn on a dark mode website or theme.

Dark Mode Block vs QS Dark Mode Plugin