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 …

dudaster

<p><strong>ECS adds what Elementor doesn’t have — without replacing what it does well.</strong></p>
<p>Every feature is a standalone module. Enable only what you need from <strong>ECS <span aria-hidden="true" class="wp-exclude-emoji">→</span> Modules</strong> in the WordPress admin. Unused modules load zero CSS, zero JS, and register no hooks.</p>
<h4>🎨 Dark Mode Colours</h4>
<p>A <strong>Default Colours</strong> tab appears inside Elementor’s Site Settings, right next to Global Colors.</p>
<ul>
<li>Set a <strong>Default</strong> and a <strong>Dark Mode</strong> colour for every global colour slot.</li>
<li>Dark mode colours are written as CSS variables — no JavaScript swapping, pure CSS, zero flash.</li>
<li>A <strong>fallback swatch</strong> shows the default colour when the dark slot is empty.</li>
<li>The <strong>Dark Mode Switcher</strong> widget lets visitors toggle between light and dark with full style controls.</li>
</ul>
<h4>📐 Container Layout</h4>
<p>Two additional layout modes for Elementor Flex Containers:</p>
<p><strong>Slider Mode</strong> — Turn any container into a CSS-only slider. No JS library, no dependencies.</p>
<p><strong>Custom Layout</strong> — Pick a Theme Builder template as the layout frame. Place ECS Placeholder widgets inside the template; ECS distributes the container’s children into those slots automatically. Supports cycling and graceful fallback. Works live in the Elementor editor.</p>
<h4>🔁 Loop Custom Layout</h4>
<p>Arrange Loop Grid items inside a Custom Layout template using ECS Placeholder widgets — powered by Elementor’s native Loop Grid query. Full editorial control over the item grid without leaving Elementor.</p>
<h4>📱 Menu Responsive</h4>
<p>Turn any Elementor Nav Menu widget into a responsive hamburger menu. Layout, alignment, animation, and breakpoint controls — all from the Elementor panel.</p>
<h4>✍️ Editorial Text</h4>
<p>Wrap images inside text blocks with float controls and captions. Magazine-style editorial layouts built entirely in Elementor.</p>
<h4>🎨 Style Templates</h4>
<p>Save any widget’s Style tab settings as a named preset and apply them to other widgets of the same type in one click — across pages, templates, and sites. Export and import your full style library as JSON.</p>
<h4>🛠 JSON PowerEdit</h4>
<p>Edit any Elementor widget’s raw settings JSON directly from the panel. Raw textarea for paste-and-replace, interactive tree view for surgical edits. Keyboard shortcut: Ctrl/Cmd + Enter to apply.</p>
<h4>✅ Legacy (ECS 3.x — backward compatibility)</h4>
<p>The original loop skin functionality is preserved in the Legacy module for existing sites built with ECS 3.x. If you’re updating from ECS 3.x, this module activates automatically. For new projects, use Elementor’s native Loop Builder.</p>
<p>Note: This plugin requires Elementor (free). Container Layout (Custom Layout mode) and Style Templates require Elementor Pro.</p>


ECS – Ele Custom Skin for Elementor

Seven free modules for Elementor: dark mode, container layouts, mobile menu, editorial text, style presets, JSON editor — all modular, all free.

Dark Mode Block vs ECS – Ele Custom Skin for Elementor