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

Abu Talib

Faridul Islam

Asikur Rahman

SYED FARHAN REZA

Shamim Hasan

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>
<h3><a href="https://bdthemes.com/deals/?utm_source=WordPress_org&utm_medium=bfcm_cta&utm_campaign=dark_reader_pro" rel="nofollow ugc">🎉 Black Friday Offer: Upgrade to Pro and Save up to 87% on All Plugins! 🎊</a></h3>
<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><iframe loading="lazy" title="Dark Reader Pro for WordPress | Complete Installation & Customization Guide by BdThemes" width="750" height="422" src="https://www.youtube.com/embed/xerd-5qhvos?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></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>


Dark Reader – Dark Mode for Better Accessibility, UX, Dark Theme and Night Mode

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, auto detection, scheduling, frontend admin dashboard and mor …

Dark Mode Block vs Dark Reader – Dark Mode for Better Accessibility, UX, Dark Theme and Night Mode