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 …

Freemius

DeoThemes

<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/BQfr7GOjkUQ?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>💻 <a href="https://nocturne.deothemes.com/?utm_source=wordpress.org" rel="nofollow ugc">Demo</a>  |  👩🏼‍💻 <a href="https://deothemes.com/?utm_source=wordpress.org" rel="nofollow ugc">View Other Products</a>  |  📔 <a href="https://docs.deothemes.com/nocturne/?utm_source=wordpress.org" rel="nofollow ugc">Docs</a></p>
<h4>Effortlessly transform your Elementor websites into stunning dark-themed versions.</h4>
<p>Nocturne Dark Mode seamlessly integrates with Elementor, allowing you to customize the dark mode settings to match your website’s branding and design. Whether you want to create a dark mode version of your entire website or just specific sections, Nocturne Dark Mode gives you the flexibility to do so. Say goodbye to blindingly bright websites and give your users the option to switch to a more comfortable and stylish dark mode with Nocturne Dark Mode for Elementor and Elementor Pro.</p>
<h4>WHY CHOOSE HOW NOCTURNE DARK MODE?</h4>
<p>Unlike other plugins, Noturne Dark Mode adds custom controls to every Elementor widget, making the customization process more smooth an easy. Everything is editable via Elementor editor screen.</p>
<h4>NOCTURNE DARK MODE FREE FEATURES</h4>
<ol>
<li>Easily customize any Elementor widget.</li>
<li>Works with sections and containers.</li>
<li><strong>Dark Mode Image Elementor widget</strong> – display different image when dark mode is activate.</li>
<li><strong>Dark Mode Switcher Elementor widget</strong> – place dark mode widget anywhere on the page.</li>
<li>Set Dark Mode as the default color scheme.</li>
<li>Save user choice every time they visit your site.</li>
</ol>
<h4>NOCTURNE DARK MODE PRO FEATURES</h4>
<ol>
<li>Elementor Pro compatibility</li>
<li>3 Toggle styles</li>
</ol>
<h4>COPYRIGHT</h4>
<p>Nocturne Dark Mode, Copyright 2023 DeoThemes</p>


Nocturne Dark Mode – Elementor Dark Mode Toggle for WordPress

Nocturne Dark Mode is a powerful plugin that allows you to easily enable dark mode on your website built with Elementor with just a few clicks.

Dark Mode Block vs Nocturne Dark Mode – Elementor Dark Mode Toggle for WordPress