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 …

Freemius

Md Jakirul Islam

CodeConfig

wpwebdevs

<a href="https://codeconfig.dev/dusky-dark-mode/" rel="nofollow ugc">Dusky Dark Mode is the way to enhance your website</a> with an easy, eye-friendly dark mode that reduces eye strain and grabs traffic. It offers predefined presets to match your site’s aesthetic and allows real-time customization. With admin dashboard dark mode support you can enable dark mode on your Dashboard with just one click. Choose Dusky Dark Mode for a sophisticated, user-friendly solution that improves both functionality and aesthetics.
<a href="https://codeconfig.dev/dusky-dark-mode/" rel="nofollow ugc">👁️ More Features</a> | <a href="https://codeconfig.dev/dusky-dark-mode/dusky-pricing/" rel="nofollow ugc">👑 Upgrade Now</a> | <a href="https://codeconfig.dev/docs-category/dusky-dark-mode/" rel="nofollow ugc">📄 Docs</a> | <a href="https://youtube.com/playlist?list=PLNYVH9xXmhE0fKneRN9ZVkVR06yLV05km&si=psPswzS6iY0ts-GP" rel="nofollow ugc">▶️ Video Tutorial</a> | <a href="https://codeconfig.dev/contact/" rel="nofollow ugc">🎧 Support</a>
<iframe loading="lazy" title="How to Install and Activate Dusky Dark Mode for WordPress | The Best Dark Mode Plugin For WordPress" width="750" height="563" src="https://www.youtube.com/embed/EZq4djWwIV8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>Let’s take a look at the impressive features of Dusky Dark Mode:</h3>
<h3>✨ FREE FEATURES: ✨</h3>
📋 Menu Toggle – Easily add a dark mode toggle switch or dropdown to your WordPress menu. This lets visitors turn dark mode on or off without confusion.
💻 Frontend Dark Mode – Switch your website’s colors to a darker theme on the frontend. It improves readability, reduces eye strain, and makes browsing more comfortable, especially for users who spend long hours on your website.
🌙 Default Dark Mode – Show your website in dark mode by default. When new visitors land on your site, they’ll see the dark version immediately unless they choose otherwise.
🌓 Auto Match OS Mode – Automatically detects the visitor’s device setting (light or dark) and applies the correct theme. This ensures a smooth experience for users who prefer their system settings to control the website’s appearance.
👨🏼‍💻 Admin Dashboard Dark Mode – Give your admin panel a dark interface. Perfect for site owners and editors who work long hours in WordPress and want a consistent dark theme across the backend.
👥 Autosave User Mode – Dusky Dark Mode remembers the visitor’s choice. If they select dark mode once, the next time they return to your site, dark mode will load automatically.
✎ Classic and Block Editor Compatibility – Works seamlessly with both the Classic Editor and the Block (Gutenberg) Editor, ensuring a smooth content editing experience in dark mode.
⌨️ Keyboard Shortcut – Quickly toggle between light and dark mode with <code>(Ctrl + Alt + D)</code>. A great accessibility feature for power users.
⌛ Time-Based Dark Mode – Schedule dark mode to activate and deactivate at specific times of the day. For example, you can enable dark mode at night and automatically switch back to light mode in the morning.
📶 Improve Performance – Performance Mode helps reduce script loading time and ensures dark mode works faster and smoothly across all pages.
💻 Separate Toggle for Frontend and Dashboard – Control dark mode for your site visitors and your own admin dashboard separately. Customize them independently to suit different needs.
🎨 Color Settings – Select from 10+ built-in color presets to change the overall dark mode style instantly.
🙅‍♂️ Exclude Elements – You can exclude certain parts of your site (like forms, widgets, or images) from dark mode. This gives you more control over what areas should stay in light mode.
🖼️ Image Settings – Adjust how images look in dark mode. Choose from low brightness, grayscale, or color inversion to keep them readable and stylish.
🎥 Video Settings – Just like images, control how videos are displayed in dark mode. This helps balance visuals without losing clarity.
✅ Auto Save, Import, Export, Reset – Automatically save changes you make in the settings. Import or export your dark mode settings easily, and reset everything back to default with a single click.
<h3>🚀 Pro Features</h3>
🔴 Dark Mode Live Edit – Customize dark mode in real-time. Instantly preview your changes as you adjust colors, switches, and styles.
🧮 10+ Color Presets – Unlock more color schemes for a stylish dark look.
✏️ Custom Colors – Choose your own background, text, link, and button colors to match your brand.
🔘 30+ Toggle Buttons – Get access to 40+ toggle styles to fit your site’s design.
🖼️ Image and Video Replacement – Replace light-mode images and videos with alternative versions in dark mode.
📚 Dark Mode Typography – Improve readability with different fonts and font sizes when dark mode is enabled.
🫳 Draggable Toggle Switch – Drag and place the dark mode switch anywhere on the screen. Works on both frontend and backend.
👥 User Role Based Dashboard Dark Mode – Enable dark mode only for certain WordPress roles (e.g., Admins, Editors, Authors).
📈 Usage Analytics – Track dark mode usage on your site. See how many users prefer dark mode and how often it’s toggled.
䷛ Analytics & Reporting – Get detailed email reports on dark mode usage. Customize how often reports are sent and what details are included.
</> Custom CSS – Add your own CSS to fully control the appearance of dark mode.
<h3>🔋 Compatibility</h3>
Dusky Dark Mode is tested with the popular WordPress themes and plugins. It works with Astra, Divi, Avada, GeneratePress, Gutenberg, Classic Editor, Elementor, Beaver Builder, and many other popular themes. It’s also fully compatible with WooCommerce, Easy Digital Downloads, Contact Form 7, Gravity Forms, Yoast SEO, and other widely used plugins.
If you find any conflicts with your theme or plugins, you can easily fix them using the built-in Custom CSS option or by contacting our support team.
<h3>📚DOCUMENTATION & SUPPORT</h3>
<a href="https://codeconfig.dev/docs-category/dusky-dark-mode/" rel="nofollow ugc">Documentation</a> 
<a href="https://codeconfig.dev/contact/" rel="nofollow ugc">Support</a> 
<a href="https://www.youtube.com/playlist?list=PLNYVH9xXmhE0fKneRN9ZVkVR06yLV05km" rel="nofollow ugc">Video Tutorials</a> 
<a href="https://codeconfig.dev/dusky-dark-mode" rel="nofollow ugc">Website</a>
<h3>3rd Party API</h3>
This plugin uses the <a href="http://ip-api.com" rel="nofollow ugc">ip-api.com</a> API to detect the user’s location and enable time-based dark mode according to their local time.
<h3>Special Thanks</h3>
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 its licensing terms, please visit https://github.com/darkreader/darkreader.
<h3>Contribute</h3>
Dusky Dark Mode is an open-source project. You can view the full sources (unminified JS) and contribute to the project on GitLab: https://gitlab.com/jakirul/dusky-dark-mode
<h3>🔥 WHAT’S NEXT 🔥</h3>
Consider checking out our other products:
📦 <a href="https://wordpress.org/plugins/integrate-dropbox/" rel="ugc">File Manager For Dropbox</a> – File Manager for Dropbox lets you connect your cloud storage to your site so you can upload, embed, and share files without touching your server space.
📂 <a href="https://wordpress.org/plugins/integration-google-drive/" rel="ugc">Integration Google Drive</a> – Easily use any Google Drive files to WordPress with awesome gallery, slider carousel, file browser, and embed documents.
🛒 <a href="https://wordpress.org/plugins/essential-addons-for-woocommerce" rel="ugc">Essential Addons for WooCommerce</a> – Packed with 14+ must-have features to supercharge your WooCommerce store.
♿ <a href="https://wordpress.org/plugins/codeconfig-accessibility/" rel="ugc">Accessiy</a> – The Accessibility tool to make your website accessible for everyone.

Dusky Dark Mode – Dark Mode for Gutenberg and Elementor


Dusky Dark Mode is the best WordPress dark mode plugin, recommended for use on your website to reduce eye strain and ensure prolonged user engagement.


Best WP Dark Mode plugin

Enable Dark Mode on your website & get an awesome user experience with advanced features.

Dark Mode Block vs Dusky Dark Mode – Dark Mode for Gutenberg and Elementor