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 …

Akhtarujjaman Shuvo

AddonMaster

<p>This plugin help to activate night mode and increase or decrease brightness of your website.You can easily add night mode filter to whole website and adjust it to improve the readability of text, images and other elements, Protect eyes from hurting when the screen is too bright by dimming the light.</p>
<h3>Features of Night Mode for WordPress</h3>
<ul>
<li>Custom Menu Select Option</li>
<li>Elegent Night Mode Kit</li>
<li>Custom CSS option</li>
<li>Easy To Customize all Settings</li>
<li>Import/Export Settings</li>
<li>Night Mode Options</li>
<li>Text Color</li>
<li>Background Color</li>
<li>Link Color</li>
<li>Link Hover Color</li>
<li>Border Color</li>
<li>Image filter (Opacity)</li>
</ul>
<h3>Font Size kit options</h3>
<ul>
<li>Control website font sizes for Large</li>
<li>Control website font sizes for Extra Large</li>
<li>Medium is your default font size</li>
</ul>
<h3>NIGHT MODE FOR WORDPRESS IS COMPATIBLE WITH ALL MAJOR MODERN BROWSERS:</h3>
<ul>
<li>Firefox</li>
<li>Chrome</li>
<li>Safari</li>
<li>Opera</li>
<li>Edge</li>
</ul>
<h3>Need Support?</h3>
<p>If you need any technical support, please send us a message at addonmasterwp@gmail.com and we will get back to you as soon as possible.</p>
<h3>Why Night Mode for WordPress?</h3>
<ul>
<li>Help Visitor Reduce Eye Strain</li>
<li>Reduce Dry Eye of your Visitors</li>
<li>Prevent Retinal Damage</li>
<li>Reduce Risk of Depression, Diabetes, and Cardiovascular Issues while reading your blog</li>
<li>Improve Battery Life of your Visitors</li>
<li>Keep Visitor?s Device Cooler</li>
<li>Boost Their Mood and Spand More Time To your website</li>
<li>Increase/Decrease Font Size</li>
<li>Zero Delay activation</li>
</ul>


Night Mode for WordPress

This plugin help to activate night mode and increase or decrease brightness of your website.You can easily add night mode filter to whole website and  …

Dark Mode Block vs Night Mode for WordPress