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 …

Rahi Saiful

themelooks

<p>The dark mode is better for your eyes in low-light environments. Also, it can reduce eye strain in low-light conditions (night-time or dimmer workspaces). Darklooks is a WordPress plugin that allows you to implement the dark mode option on your WordPress site. So that visitors can change your site mode from lite to dark and dark to lite, on visitor preference.This plugin builds with a lot of effective features. That will help you to make the environments like yours.</p>
<pre><a href="https://enteraddon.com/darklooks/" rel="nofollow ugc">Live Demo</a></pre>
<pre><a href="https://www.themelooks.com/" rel="nofollow ugc">Checkout Our Premium Product</a></pre>
<pre><a href="https://themeforest.net/user/themelooks/portfolio" rel="nofollow ugc">Checkout Our Themeforest Profile</a></pre>
<pre><a href="https://codecanyon.net/user/themelooks/portfolio" rel="nofollow ugc">Checkout Our Codecanyon Profile</a></pre>
<h4>Main Features of DarkLooks</h4>
<ul>
<li>Floating Switch Button</li>
<li>Floating Switch Position Change Option ( Top, Bottom, Left, Right )</li>
<li>5 switch styles</li>
<li>All kinds of OS supported</li>
<li>Default Mode</li>
<li>2 types of dark mode Method</li>
<li>9 preset color</li>
<li>Custom set color option</li>
<li>Dark mode logo set option</li>
<li>Dark mode image set option</li>
<li>Dark mode image brightness set option</li>
<li>Dark mode body font size set option</li>
<li>Dark mode time schedule set option</li>
<li>Remember last time mode</li>
<li>Custom CSS add option</li>
<li>Easy settings options</li>
<li>Compatibility with WooCommerce</li>
<li>Compatibility with wordpress 5.8+</li>
<li>Translation ready</li>
<li>Ready for translation ( .pot files included )</li>
<li>Free Updates</li>
<li>Error free code</li>
<li>Well Documented</li>
</ul>
<h3>Privacy Policy</h3>
<p>DarkLooks – Dark Mode Switcher For WordPress 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.</p>
<p>Appsero SDK <strong>does not gather any data by default.</strong> The SDK only starts gathering basic telemetry data <strong>when a user allows it via the admin notice</strong>. We collect the data to ensure a great user experience for all our users.</p>
<p>Integrating Appsero SDK <strong>DOES NOT IMMEDIATELY</strong> start gathering data, <strong>without confirmation from users in any case.</strong></p>
<p>Learn more about how <a href="https://appsero.com/privacy-policy/" rel="nofollow ugc">Appsero collects and uses this data</a>.</p>


DarkLooks – Dark Mode Switcher For WordPress

I have tested many of this type of plugin, none of them were satisfactory, until I tested this. It's almost perfect.

Now the little issue that I have: Most probably when I click on the button to view the site in Dark Mode or not is stored in a cookie. And when I come back to the site, my last button selection always shows up, regardless of the tie scheduling that is available to configure in the backsite. Shouldn't be the other way around, where the scheduled times should trump over the "cookie" value. If this is the case, then the only other explanation that I have is that the Scheduled times are executed according to UTC and not by the time zone setting set at the General Settings page. A clarification would be greatly appreciated.

Thanks for this plugin, it's excellent.
Nick.

Finally - I found a Dark mode plugin that works for me.

The dark mode is better for your eyes in low-light environments. Also, it can reduce eye strain in low-light conditions (night-time or dimmer workspac …

Dark Mode Block vs DarkLooks – Dark Mode Switcher For WordPress