Erik

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. 
Designed to be lightweight and efficient the whole frontend script weights less than half of a kb gzipped 😉
Features: 
– Toggle dark mode with a user-friendly icon. 
– Preserve your website’s color scheme while improving readability in low-light environments. 
– Enhanced user experience with reduced eye strain. 
– Customizable
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.
<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>
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.
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. 
However, you have the flexibility to make it even better by setting the text color as the background and vice versa.
Here’s how to do it:
<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>
First dequeue the current style in this way:
<pre><code>add_action( 'wp_enqueue_scripts', function () {
 /** dequeue the default dark mode */
 wp_dequeue_style( 'codekraft-dark-mode-style' );
}, 9 );
</code></pre>
Then add yours!
<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>
Please support the plugin posting your custom style and a screenshot in the WordPress support forum section!

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 …

Simone Visciano

SVisciano – Light-Dark Theme Mode allows you to create a secondary color variant of your website and let users switch between the default theme and a custom override.
The plugin does not force a predefined light or dark style. Instead, it works on top of your existing design:
• The default theme (switch OFF) keeps the original colors used to build your site. 
• The alternate theme (switch ON) applies custom color overrides based on a mapping system you define. 
• The switch in automatic mode works for both themes and decides to use default or alternate based on the user’s browser preferences.
This means your base theme can be either light or dark. You decide which version is the default, and the plugin generates the secondary variant accordingly.
How it works:
<ol>
<li>Select your base theme (Light or Dark) in the settings.</li>
<li>Scan a page of your site to automatically detect color variables.</li>
<li>Map the original color variables to the custom override colors you want to apply.</li>
<li>Place the shortcode anywhere on your site to display the theme switcher.</li>
</ol>
The scanning system helps you detect color variables used on a specific page, making the mapping process easier. However, you are not limited to the scan results: you can manually enter any color variable name and define its override value.
When users activate the switch to the alternate theme of your base theme, the mapped colors are dynamically replaced with your custom ones, creating a clean secondary theme without modifying your original design.
Key Features:
• Base theme selectable (Light, Auto or Dark) 
• Custom color override mapping 
• Automatic variable scanning system 
• Manual variable mapping supported 
• Multiple toggle switch styles 
• Shortcode-based placement 
• Lightweight and compatible with most themes
SVisciano – Light-Dark Theme Mode gives you full control over how your secondary theme looks, without locking you into a predefined dark mode system.

SVisciano – Light-Dark Theme Mode

Create a secondary color variant of your site and let users switch between the default theme and a custom light or dark override.

Dark Mode Block vs SVisciano – Light-Dark Theme Mode