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 …

ThemeAtelier

Foysal Imran

Darkify makes it easy to add a dark mode feature to your site with just a few clicks. The plugin lets visitors switch to a dark interface that can improve readability and comfort in low-light environments.
Dark mode can help reduce eye strain and support accessibility for users with light sensitivity or visual preferences. Darkify supports both the frontend and the WordPress admin dashboard so you can use a consistent dark interface across your site.
<h4>Why choose Darkify?</h4>
Darkify is a customizable dark mode plugin for WordPress sites. It provides a toggle for both the frontend and the WordPress admin dashboard and includes options to adjust colors, media, and visibility so your content remains legible in dark mode.
Dark mode is increasingly common across devices and applications because it can be more comfortable in low-light settings. Darkify offers an easy setup and controls to tailor the experience to your site’s design.
👁️<a href="https://darkifywp.com/" rel="nofollow ugc">Plugin Demo</a> | 🚀<a href="https://darkifywp.com/pricing/?ref=1" rel="nofollow ugc">Pro Version</a> | 👩🏼‍💻<a href="https://wordpress.org/support/plugin/darkify/" rel="ugc">Support</a> | 🌟<a href="https://wordpress.org/support/plugin/darkify/reviews/#new-post" rel="ugc">Rate this plugin</a> | 📖<a href="https://darkifywp.com/docs/" rel="nofollow ugc">Documentation</a>
<h4>Key Features of Darkify Dark mode Plugin</h4>
<ul>
<li>
Frontend Dark Mode: Activate dark mode on your website with one click. The plugin automatically adapts to your site’s layout for a consistent dark theme experience.
</li>
<li>
Admin Panel Dark Mode: Customize your WordPress backend with a smooth, modern dark mode theme designed for comfort and improved workflow.
</li>
<li>
Dark Mode by Default: Launch your website in dark mode by default while giving users the freedom to switch to light mode anytime they choose.
</li>
<li>
OS-Aware Dark Mode: Automatically matches the user’s operating system theme—dark or light—for a seamless, personalized browsing experience.
</li>
<li>
Time-Based Dark Mode: Set a custom schedule to automatically switch between light and dark mode based on your visitor’s local time zone.
</li>
<li>
Keyboard Shortcut: Instantly toggle dark mode with a simple keyboard command: Ctrl + Alt + D. The plugin can also auto-switch based on OS settings.
</li>
<li>
Multiple Floating Switch Designs: Select from various stylish floating switches to complement your website’s design and branding.
</li>
<li>
Customizable Switch: Customize the dark mode toggle with unique colors, sizes, and styles to ensure it aligns perfectly with your brand.
</li>
<li>
Switch in Menu: Add a dark mode toggle directly into your main navigation menu for easy access and better user experience.
</li>
<li>
Shortcode Switch: Use a simple shortcode to place the dark mode switch anywhere on your site—pages, posts, sidebars, or footers.
</li>
<li>
Color Presets & Customization: Choose from 8 beautiful pre-set color schemes or fully customize the color palette to match your brand identity.
</li>
<li>
Advanced Image Control: Enhance image presentation in dark mode with customizable brightness, contrast, and grayscale settings—perfect for inline SVGs and backgrounds.
</li>
<li>
Video Control: Use built-in video enhancement features to adjust brightness and grayscale, ensuring your video content looks great in dark mode across all devices.
</li>
<li>
Page Builder Compatibility: Fully compatible with top WordPress page builders like Elementor, Divi, WPBakery, Visual Composer, Beaver Builder, and Oxygen, making dark mode integration effortless.
</li>
<li>
Easy Settings Panel: Control all plugin features through a clean, intuitive settings dashboard that simplifies customization.
</li>
<li>
Multisite Support: Designed to work flawlessly across WordPress multisite networks—activate dark mode globally or per site.
</li>
<li>
Multilingual Ready: Built with translation support to easily localize the plugin for international or multi-language websites.
</li>
<li>
Theme Compatibility: Works out-of-the-box with any WordPress theme, ensuring smooth integration and consistent styling.
</li>
<li>
Developer-Friendly: Clean, well-documented codebase makes it easy for developers to extend, modify, and build upon the plugin.
</li>
<li>
SEO Optimized: Built with SEO best practices to ensure your website maintains optimal performance and visibility on search engines.
</li>
<li>
Cross-Browser Compatibility: Fully tested and functional on all major browsers, including Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer.
</li>
<li>
Comprehensive Documentation & Tutorials: Step-by-step user guides and video tutorials are included to help you get started quickly and confidently.
</li>
<li>
Fast and Responsive Support: Get professional, responsive support from our expert team—whenever you need help.
</li>
</ul>
<h3>😍 WHAT OUR CUSTOMERS SAY ABOUT DARKIFY DARK MODE!</h3>
<blockquote>
<a href="https://wordpress.org/support/topic/switched-to-darkify-clean-smooth-dark-mode-that-just-fits-my-site/" rel="ugc"><code>🖤 Switched to Darkify — Clean, Smooth Dark Mode That Just Fits My Site</code></a> 
 I’ve tried several dark mode plugins over the past few years, including WP Dark Mode, Darklup, Dracula Dark Mode, DarkMySite, Darklooks, Dusky Dark Mode, Dark Mode Toggle, Dark Reader and a few lightweight CSS-only solutions. Many of them looked promising at first, but they always seemed to come with some trade-offs — either too heavy, too many ads in the admin panel, compatibility issues with Elementor/Gutenberg, or limited custom control. After switching to Darkify Dark Mode it’s the first time I’ve actually stuck with a dark mode plugin and didn’t feel the need to look for alternatives. – by @Monica Hayes
</blockquote>
<h3>Full Features & Setup Guide</h3>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/H51pgFm52LY?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>
<h4>Page Builder Compatibility</h4>
<ul>
<li>Gutenberg</li>
<li>WPBakery</li>
<li>Elementor</li>
<li>Beaver Builder</li>
<li>SiteOrigin</li>
<li>Divi</li>
<li>LayersWP</li>
<li>MotoPress</li>
<li>Cornerstone</li>
<li>Themify Builder</li>
</ul>
<h4>Compatible Themes (examples)</h4>
<ul>
<li>Hello Elementor</li>
<li>Astra</li>
<li>Divi</li>
<li>Kadence</li>
<li>Themify Ultra</li>
<li>OceanWP</li>
<li>Hestia</li>
<li>Inspiro</li>
<li>GeneratePress</li>
<li>Avada</li>
<li>Blocksy</li>
<li>Neve</li>
</ul>
<h3>PRO VERSION FEATURES</h3>
🎨 Design & Customization Options
<ul>
<li>
16+ Floating Switch Designs 
Choose from a diverse collection of floating switch styles to perfectly match your website’s look and feel. With over 12 design options, you’ll easily find the ideal toggle to fit your brand.
</li>
<li>
Draggable Switch Positioning 
Allow users to move the floating dark mode switch anywhere on the screen. This drag-and-drop flexibility ensures convenient access from any page or section.
</li>
<li>
Special Color Preset Customization 
Customize your dark mode theme with advanced color settings. Change link colors, border colors, form field styling, and button appearances to align with your brand identity.
</li>
<li>
Custom CSS for Dark Mode 
Add custom CSS styles that apply only in dark mode. This gives developers and designers complete control for fine-tuning the dark theme experience.
</li>
</ul>
🖼️ Media Handling
<ul>
<li>
Image Inversion 
Automatically invert specific images for better visibility in dark mode. Improve both aesthetics and accessibility without needing to edit the original assets.
</li>
<li>
Image Replacement 
Seamlessly replace specific images with dark-mode-optimized versions. Perfect for logos, banners, or illustrations that need a customized look in night mode.
</li>
<li>
Video Replacement 
Automatically swap videos with dark-friendly versions to maintain a consistent design across your website’s visual elements.
</li>
</ul>
🔧 Advanced Visibility Controls
<ul>
<li>
Allow / Disallow Elements 
Fine-tune your dark mode display by selecting which HTML elements or sections should use dark mode styling—and which should not.
</li>
<li>
Allow / Disallow Pages 
Choose which individual pages display dark mode. Exclude landing pages, checkout flows, or any special content for a fully tailored user experience.
</li>
<li>
Allow / Disallow Posts 
Decide which specific posts support dark mode. Maintain full editorial control over how your content appears across different post types.
</li>
</ul>
<h3>External services</h3>
Darkify 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>.
<h3>OTHER AMAZING PRODUCTS FROM ThemeAtelier</h3>
➡️ <a href="https://wordpress.org/plugins/chat-help/" rel="ugc">WhatsApp Chat Help</a> – A WordPress plugin that allows website owners to easily add a WhatsApp chat bubble to their website and comes with Gutenberg, Elementor and Shortcode options.
➡️ <a href="https://wordpress.org/plugins/eventful/" rel="ugc">Eventful – Events Showcase For The Events Calendar</a> – Elevate your event management with this dynamic addon, enhancing ‘The Events Calendar’ with versatile layouts, advanced filtering, and user-friendly features for superior event showcasing.
➡️ <a href="https://wordpress.org/plugins/greet-bubble/" rel="ugc">Greet – Video Bubble Warm Welcome Plugin</a> – A powerful and user-friendly video bubble plugin for WordPress that provides website owners with the opportunity to create a dynamic and engaging welcome experience for their visitors.
➡️ <a href="https://wordpress.org/plugins/domain-for-sale/" rel="ugc">Domain For Sale</a> – Transform your unused domain names into cash with this easy-to-use plugin that provides a professional template, customizable options, and a contact form for effortless selling.
➡️ <a href="https://wordpress.org/plugins/eventful-for-elementor/" rel="ugc">Eventful for Elementor – Events Showcase For The Events Calendar and Elementor</a> – Elevate your event management with this dynamic addon, enhancing ‘The Events Calendar’ with versatile layouts, advanced filtering, and user-friendly features for superior event showcasing.

Darkify – Dark Mode for Better UX, Accessibility & Dark Theme Design

Add dark mode to your site and admin dashboard. Customizable, lightweight, and designed to improve accessibility and comfort.

Dark Mode Block vs Darkify – Dark Mode for Better UX, Accessibility & Dark Theme Design