Erik

<p>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.<br />
Designed to be lightweight and efficient the whole frontend script weights less than half of a kb gzipped 😉</p>
<p>Features:<br />
– Toggle dark mode with a user-friendly icon.<br />
– Preserve your website’s color scheme while improving readability in low-light environments.<br />
– Enhanced user experience with reduced eye strain.<br />
– Customizable</p>
<p>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.</p>
<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>
<p>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.</p>
<p>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.<br />
However, you have the flexibility to make it even better by setting the text color as the background and vice versa.</p>
<p>Here’s how to do it:</p>
<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>
<p>First dequeue the current style in this way:</p>
<pre><code>add_action( 'wp_enqueue_scripts', function () {
    /** dequeue the default dark mode */
    wp_dequeue_style( 'codekraft-dark-mode-style' );
}, 9 );
</code></pre>
<p>Then add yours!</p>
<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>
<p>Please support the plugin posting your custom style and a screenshot in the WordPress support forum section!</p>


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 …

bdthemes

Selim Rana

Shamim Hasan

Abu Talib

Faridul Islam

Asikur Rahman

SYED FARHAN REZA

Md. Arafat Akash

Shm Usuf

<p>Dark Reader is a complete WordPress dark mode plugin that adds modern design, accessibility, and flexibility to your website. With one click, you can transform your site into a comfortable dark mode experience that visitors will love.</p>
<p>Many users today expect websites to support dark mode because it reduces eye strain, improves readability, and looks professional. By adding Dark Reader, you give visitors a modern option while keeping your site easy to use and visually appealing.</p>
<p>Trusted by <strong>100,000+ websites</strong>, it’s the easiest way to design your stunning websites without coding.</p>
<p>Plugins List – 12</p>
<p>Element Pack<br />
Prime Slider<br />
Ultimate Post Kit<br />
Ultimate Store Kit<br />
Pixel Gallery<br />
Spin Wheel</p>
<p>ZoloBlocks<br />
Smart Admin Assistant<br />
One Accessibility<br />
Sigma Forms<br />
Dark Reader<br />
Launch Guard</p>
<p><span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/xerd-5qhvos?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></span></p>
<h3>Why Add Dark Reader to Your WordPress Website?</h3>
<p>Dark mode is now standard across devices, apps, and operating systems. People use it daily on their phones, computers, and browsers. When your website supports dark mode, you match their preferences and provide a familiar browsing environment.</p>
<p>Adding Dark Reader improves accessibility for users with light sensitivity or those browsing at night. It creates a professional look, increases engagement, and makes your site stand out. This simple feature has a big impact on both usability and visitor satisfaction.</p>
<p><strong><a href="https://playground.wordpress.net/?plugin=dark-reader" rel="nofollow ugc">Try Live Demo</a></strong> | <strong><a href="https://bdthemes.com/plugin/dark-reader/?utm_source=WordPress_Repository&utm_medium=Plugin_Page&utm_campaign=WordPress_to_Dark_Reader" rel="nofollow ugc">Get Dark Reader Dark Mode</a></strong> | <strong><a href="https://bdthemes.com/all-knowledge-base-of-dark-reader/?utm_source=WordPress_Repository&utm_medium=Plugin_Page&utm_campaign=WordPress_to_Dark_Reader" rel="nofollow ugc">Read Documentation</a></strong></p>
<h3>Key Features of Dark Reader Dark Mode Plugin</h3>
<h3>Enable Dark Mode</h3>
<p>Enable dark mode is the main feature of Dark Reader. When you turn this on, your entire website will automatically switch to a dark color scheme. Visitors will see a modern design that feels comfortable on the eyes. It works on all pages, posts, and even your WordPress admin dashboard if you want.</p>
<p>This feature helps reduce eye strain, especially for people browsing at night or in low-light conditions. It also makes your website look more professional and up to date since most apps and systems now support dark mode. Adding this option improves user experience and keeps visitors engaged longer.</p>
<h3>Brightness Control</h3>
<p>Brightness Control gives you the ability to fine-tune how light or dark your website appears when dark mode is enabled. Some users prefer a very deep black, while others like a softer gray background. With this setting, you can adjust brightness to create the perfect balance for your audience.</p>
<p>This makes your dark mode more inclusive because not all visitors have the same preferences. By customizing brightness, you can reduce glare without making the site too dark. It ensures your design stays readable and pleasant for everyone.</p>
<h3>Contrast Control</h3>
<p>Contrast Control lets you adjust the difference between text and background in dark mode. High contrast improves readability, while lower contrast gives a softer look. You can choose the level that works best for your content style.</p>
<p>This feature is especially important for accessibility. Visitors with vision difficulties need enough contrast to read comfortably. By offering adjustable contrast, Dark Reader dark mode plugin makes your site more user-friendly and compliant with modern accessibility practices.</p>
<h3>Sepia Filter</h3>
<p>The Sepia Filter adds a warm, brownish tone to your site in dark mode. This reduces the amount of blue light, which is often linked to eye strain and sleep problems. Many users prefer sepia for reading long articles or browsing at night.</p>
<p>Using a sepia effect gives your website a unique look while still keeping it easy on the eyes. It is especially helpful for blogs, magazines, and content-heavy sites where visitors spend a lot of time reading.</p>
<h3>Grayscale Filter</h3>
<p>The Grayscale Filter turns your site’s colors into shades of gray in dark mode. This creates a clean and minimal style. It also reduces distractions from bright images or colorful elements that might not fit well with dark mode.</p>
<p>Grayscale can also help content stand out more clearly. For example, text becomes the main focus because background visuals are softened. This is a great option for professional websites, portfolios, or any site that wants a modern, elegant look.</p>
<h3>Toggle Button Position</h3>
<p>The Toggle Button Position setting lets you choose where the dark mode switch appears. You can place it in the top-left, top-right, bottom-left, or bottom-right corner of the screen. This makes it easy for visitors to find and use.</p>
<p>Flexibility in position is useful because different websites have different layouts. For example, if you already have widgets or floating buttons on one side, you can move the toggle elsewhere to avoid overlapping. It gives you full control over user experience.</p>
<h3>5+ Toggle Button Styles</h3>
<p>Dark Reader comes with five different toggle button styles: Default, Round, Switch, Toggle, and Minimal. Each style has its own look and feel, so you can choose one that matches your site’s design.</p>
<p>Having multiple styles ensures the dark mode toggle blends naturally with your theme. Whether you want a bold button or a subtle switch, you can pick the option that feels right. This customization helps maintain your brand identity while offering dark mode.</p>
<h3>Custom Toggle Button Style</h3>
<p>Dark Reader Pro comes with custom emoji set toggle button with the Background Colors, Border Colors, Border Size & Shape and Icon Size.</p>
<h3>Use System Color Scheme</h3>
<p>This option matches your website with the visitor’s device preference. If their computer or phone is set to dark mode, your site will automatically load in dark mode. If not, it will stay in light mode.</p>
<p>This feature creates a seamless browsing experience because users do not need to switch modes manually. It makes your site feel more modern and adaptive to user habits, just like mobile apps and operating systems.</p>
<h3>Enable for PDFs</h3>
<p>With this feature, dark mode also applies to embedded PDF files on your site. Normally, PDFs remain bright and may clash with a dark layout. Enabling this keeps the viewing experience consistent.</p>
<p>It is especially helpful for websites that share eBooks, reports, or documents. Visitors can read PDFs without straining their eyes, and the design stays professional across all content types.</p>
<h3>Apply Immediately</h3>
<p>This setting makes sure dark mode applies instantly to all dynamic content on your website. Without it, some elements might load in light mode before switching, which can feel distracting.</p>
<p>Apply Immediately creates a smoother experience. It prevents flashing effects and ensures that every page, post, and element appears in dark mode right from the start.</p>
<h3>Filter Mode</h3>
<p>Filter Mode allows you to choose between two types of dark styles: Dimmed Mode and Dark Mode. Dimmed Mode is softer with less contrast, while Dark Mode is stronger with deeper blacks.</p>
<p>This flexibility helps you match dark mode to your brand style and visitor preferences. Some users may prefer a gentle look, while others want a bold, high-contrast design. Dark Reader lets you offer both.</p>
<h3>Text Stroke</h3>
<p>The Text Stroke option adds a thin outline to your text. This makes words stand out more clearly on dark backgrounds. It is especially useful if your design includes colored text or decorative fonts.</p>
<p>Adding text stroke improves readability without changing your site’s style. It keeps your content easy to read for everyone, even in low-light conditions or on smaller screens.</p>
<h3>Dark Mode Toggle Shortcode</h3>
<p>Dark Reader includes a shortcode [dark_reader_toggle] that you can place anywhere on your website. You can add it inside posts, pages, or widgets. This gives you full control over where visitors can access the dark mode switch.</p>
<p>Shortcode support is helpful if you want to put the toggle in specific areas, like a menu, header, or footer. It makes your site more flexible and ensures the dark mode feature is always easy to find.</p>
<h3>Exclusive Pro Features of Dark Reader Dark Mode Plugin</h3>
<h3>Time-Based Dark Mode</h3>
<p>Schedule dark mode to activate at night and switch back in the day. This happens automatically based on your chosen hours.</p>
<p>It improves comfort by matching natural usage habits. Visitors get dark mode when they need it most without any action required.</p>
<h3>Admin Dashboard Dark Mode (Pro)</h3>
<p>Dark Reader adds dark mode to the WordPress admin dashboard. This makes the backend easier on the eyes for long working sessions.</p>
<p>This feature is perfect for professionals and teams. It improves comfort while managing content or settings.</p>
<h3>Low Brightness Images (Pro)</h3>
<p>Dark Reader can lower image brightness when dark mode is active. This prevents images from being too sharp or distracting on dark backgrounds.</p>
<p>It creates balance across your website. Visitors enjoy smoother visuals and better readability.</p>
<h3>Grayscale Images (Pro)</h3>
<p>Images can be displayed in grayscale during dark mode. This gives a softer, professional look.</p>
<p>This option is useful for blogs, portfolios, or business sites that want a minimal design. It also reduces strain from bright images.</p>
<h3>Image Replacement in Dark Mode (Pro)</h3>
<p>Image replacement helps you maintain visual harmony and  readability by replacing image on the  basis of a light background and dark background.</p>
<h3>Invert Images (Pro)</h3>
<p>Invert image colors intelligently when dark mode is active. This keeps visuals visible while matching dark backgrounds.</p>
<p>The benefit is better design consistency. Images do not clash with the dark interface, keeping your site polished.</p>
<h3>Dark Mode Based Image Support (Pro)</h3>
<p>Dark Reader ensures images adapt perfectly in dark mode. It adjusts their colors and appearance without damaging quality.</p>
<h3>Widget Support (Pro)</h3>
<p>This feature allows you to add styles to toogle button and set functionalies. You can use this features on Gutenberg and Elementor in your drag-and-drop ways.</p>
<h3>Dark Mode Based Video Support (Pro)</h3>
<p>Videos can also adapt to dark mode. They adjust smoothly to match the dark interface of your website.</p>
<p>This makes multimedia content look natural in both modes. Visitors get a complete, balanced experience.</p>
<h3>Custom CSS Support (Pro)</h3>
<p>You can write custom CSS rules for dark mode. This allows you to fine-tune appearance at a detailed level.</p>
<p>This feature is ideal for developers and designers. You can create a dark mode that matches your exact vision.</p>
<h3>Exclude Elements (Pro)</h3>
<p>Choose specific elements that should not be affected by dark mode. For example, logos or banners can stay in their original colors.</p>
<p>This improves control and avoids problems. Important visuals remain clear while the rest of the site uses dark mode.</p>
<h3>Exclude Pages & Posts (Pro)</h3>
<p>You can exclude certain pages or posts from dark mode. This is useful for landing pages, special designs, or content that looks better in light mode.</p>
<p>It ensures maximum flexibility. You decide exactly where dark mode should apply.</p>
<h3>Responsive and Accessible</h3>
<p>Dark Reader is fully responsive, lightweight, and accessibility-focused. It works on all devices and improves readability for every visitor. Whether you are a blogger, business owner, or developer, Dark Reader makes it easy to add dark mode to your site without code. It is professional, flexible, and user-friendly.</p>
<h3>Popular Page Builder Support</h3>
<p>Dark Reader works with major page builders like Elementor, WPBakery, Divi and Break Builder. The layouts remain consistent while dark mode is applied using Dark Reader.</p>
<p>This ensures compatibility with advanced WordPress designs. You don’t have to worry about broken layouts when enabling dark mode.</p>
<h3>Who Is Dark Reader Dark Mode For</h3>
<ul>
<li>
<p>WordPress beginners who want an easy way to add dark mode without coding.</p>
</li>
<li>
<p>Bloggers, business owners, and e-commerce stores aiming to improve user experience.</p>
</li>
<li>
<p>Designers and developers who need advanced control and customization.</p>
</li>
<li>
<p>Agencies and teams managing multiple sites or client needs.</p>
</li>
<li>
<p>Sites that prioritize accessibility, readability, and modern design.</p>
</li>
</ul>
<h3>Checkout our other Plugins 👑</h3>
<p>Explore the best free addons for Elementor and Gutenberg to boost your site with advanced blocks, sliders and eCommerce tools.</p>
<ul>
<li>
<p><strong><a href="https://wordpress.org/plugins/bdthemes-element-pack-lite/" rel="ugc">Element Pack</a></strong> – Build responsive websites from scratch with an all-rounder package of 300+ widgets and 2700+ ready-to-use assets for Elementor.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/bdthemes-prime-slider-lite/" rel="ugc">Prime Slider</a></strong> – The revolutionary slider builder addon for Elementor with a next-gen superb interface and 50+ unique slider designs.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/ultimate-post-kit/" rel="ugc">Ultimate Post Kit</a></strong> – Best blogging addon for building a quality blogging website with fine-tuned post layouts, carousels, sliders and lists.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/ultimate-store-kit/" rel="ugc">Ultimate Store Kit</a></strong> – The only eCommerce addon for answering all your online store design problems in one package for WooCommerce and EDD.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/pixel-gallery/" rel="ugc">Pixel Gallery</a></strong> – The first Elementor-based WordPress gallery addon offering 60+ flexible and customizable gallery builder widgets.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/zoloblocks/" rel="ugc">ZoloBlocks</a></strong> – Mind-blowing dynamic block plugin for Gutenberg with powerful and advanced features offering a greater web design experience.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/ar-viewer/" rel="ugc">Augmented Reality Viewer</a></strong> – Bring your products to life with immersive 3D and AR experiences directly inside your WordPress website.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/dark-reader/" rel="ugc">Dark Reader</a></strong> – Instantly transform your website into a sleek, eye-friendly dark mode experience with smooth and elegant styling.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/ai-image/" rel="ugc">Instant Image Generator</a></strong> – Generate AI-powered images or import visuals instantly from popular platforms like Unsplash, Openverse, Pixabay, Pexels and Giphy — all from one place.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/live-copy-paste/" rel="ugc">Live Copy Paste</a></strong> – Seamlessly copy and paste sections, widgets and entire pages across domains with zero hassle.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/website-accessibility/" rel="ugc">One Accessibility</a></strong> – Make your website inclusive and accessible to everyone with essential accessibility enhancements and compliance-ready tools.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/zolo-qr-code/" rel="ugc">QR Code Generator & Scanner</a></strong> – Create and manage dynamic QR codes directly from your WordPress dashboard for smarter engagement and tracking.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/smart-admin-assistant/" rel="ugc">Smart Admin Assistant</a></strong> – Enhance your WordPress dashboard with productivity-focused tools and smart site management features.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/spin-wheel/" rel="ugc">Spin Wheel</a></strong> – Engage visitors with an interactive spinning wheel that offers discounts, coupons and promotional rewards.</p>
</li>
<li>
<p><strong><a href="https://wordpress.org/plugins/swift-checkout/" rel="ugc">Swift Checkout for WooCommerce</a></strong> – Simplify the WooCommerce checkout process to improve user experience and boost conversion rates.</p>
</li>
</ul>
<p>Visit <a href="https://bdthemes.com/" rel="nofollow ugc">BdThemes</a> to learn about our services, Elementor page builder-based products, informative blogs and documentation.</p>
<h3>1.1.5 [17th March 2026]</h3>
<ul>
<li>Added: Dashboard feed widget with styled RSS posts, banner image, badges, and footer links on the WordPress dashboard</li>
</ul>
<h3>1.1.4 [3rd March 2026]</h3>
<ul>
<li>Fixed: Admin API notification system with countdown timers</li>
</ul>
<h4>1.1.3 [9th February 2026]</h4>
<ul>
<li>Updated: Minor updates to URL links</li>
</ul>
<h4>1.1.2 [12th January 2026]</h4>
<ul>
<li>Fixed: Admin Notice</li>
</ul>
<h4>1.1.1 [30th December 2025]</h4>
<ul>
<li>Added: Accessibility Options in Advance Features Badge</li>
</ul>
<h4>1.1.0 [7th December 2025]</h4>
<ul>
<li>Updated: General code cleanup and refactoring for better performance</li>
</ul>
<h4>1.0.9 [2nd December 2025]</h4>
<ul>
<li>Updated: Made compatible with WordPress version 6.9</li>
<li>Fixed: Support Button Focus Issue</li>
</ul>
<h4>1.0.8 [23rd November 2025]</h4>
<ul>
<li>Removed: Slider Toggle Button for Design Compatibility</li>
<li>Updated: Admin Notice</li>
</ul>
<h4>1.0.7 [19th November 2025]</h4>
<ul>
<li>Fixed: Use System Color Scheme </li>
<li>Updated: Plugin Update Check</li>
<li>Added: Slider Toggle Button</li>
<li>Added: Custom Style Toggle Button in Pro</li>
</ul>
<h4>1.0.6 [11th November 2025]</h4>
<ul>
<li>Fixed: Admin Notice for Black Friday</li>
<li>Added: Liquid Glass in Pro Version</li>
</ul>
<h4>1.0.5 [10th November 2025]</h4>
<ul>
<li>Added: Admin Notice for Black Friday</li>
<li>Fixed: UI of Admin Dashboard</li>
</ul>
<h4>1.0.4 [9th September 2025]</h4>
<ul>
<li>Added: Admin Notice</li>
</ul>
<h4>1.0.3 [25th September 2025]</h4>
<ul>
<li>Added: Widget Support (Gutenberg & Elementor)</li>
<li>Updated: Image Replacement in Dark Mode in Elementor </li>
<li>Fixed: Shortcode usage on toggle  …</li>
</ul>


Dark Reader – Beautiful Dark Mode for any Website

Simple and lightweight


Really great plugin — simple, fast, and works exactly as expected. Dark mode looks clean on my site and didn’t break anything. Super easy to set up and a nice upgrade for the user experience. Highly recommended!


I’m really impressed with the Dark Reader plugin

Complete WordPress dark mode with brightness control, contrast adjustment, toggle styles, and auto detection.

Dark Mode Block vs Dark Reader – Beautiful Dark Mode for any Website