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 …

hashthemes

<p>A lightweight WordPress plugin that lets your visitors switch between light and dark mode in one click.</p>
<p>No setup pages. No confusing options. No performance overhead.</p>
<p>Just install, activate, and your visitors can switch between light and dark mode instantly with one click.</p>
<p>The plugin automatically handles your site’s colors and works out of the box with any WordPress theme. It’s built for site owners who want a modern feature without complexity.</p>
<p>If you believe features should be simple, fast, and invisible — this plugin is for you.</p>
<h3>OS Aware Dark Mode</h3>
<p>Automatically detects the user’s system preference and applies dark mode when enabled.</p>
<h3>Keyboard Shortcut Support</h3>
<p>Allow users to toggle between light and dark mode using a keyboard shortcut.</p>
<h3>Enable Dark Mode on Page Load</h3>
<p>Start your website in dark mode by default for a comfortable browsing experience.</p>
<h3>Skip Dark Mode on Selected Elements</h3>
<p>Exclude specific CSS selectors from dark mode styling for full control.</p>
<h3>Display Switch Button in Menu</h3>
<p>Easily add the light/dark mode switch button to your WordPress navigation menu.</p>
<h3>Switch Button Customization</h3>
<p>Customize the switch icon, shape, position, size, and color to match your website design.</p>
<h3>Use Custom Switch Button</h3>
<p>Replace the default toggle with your own custom switch button.</p>
<h3>Replace Images in Dark Mode</h3>
<p>Show alternative images when dark mode is enabled for better visibility.</p>
<h3>Invert Images in Dark Mode</h3>
<p>Automatically invert images to maintain contrast in dark mode.</p>
<h3>Invert SVG Graphics</h3>
<p>Apply smart inversion to SVG icons and graphics in dark mode.</p>
<h3>Enable Image Grayscale Mode</h3>
<p>Convert images to grayscale for a cleaner dark mode appearance.</p>
<h3>Darken Background Images</h3>
<p>Reduce brightness of background images for improved readability.</p>
<h3>Multiple Preset Dark Mode Color Schemes</h3>
<p>Choose from multiple ready-made dark mode color presets.ependencies, no bloat</p>


Onyx Dark Mode Switcher

Switch between light and dark themes for a more comfortable viewing experience, day or night.

Dark Mode Block vs Onyx Dark Mode Switcher