Blackout: Dark Mode Widget

Description

A simple solution to allow your users to enable/disable dark mode on your website.

It creates a widget that your users can use to toggle between normal and dark modes.

It uses the CSS mix-blend-mode to bring dark-mode to any of your websites.

Sandoche made the widget and, it has a standalone version that allows you to implement it on your website by copy+pasting a simple JavaScript script, you can find more about that by clicking here.

Do you have an issue or a feature request?

Please submit it in our [Github Repo] (https://github.com/JoseSoteloCohen/Blackout-WordPress-Dark-mode-Widget/issues)

Screenshots

  • Positioning: Edit the position fields to customize the widget positioning.
  • Middle Right: By changing the button input to 50% you can place the widget at the middle of the screen, in the right side.
  • Sizes: You can make the widget and icon bigger or smaller by using the range inputs in the settings.
  • Bigger: widget and icon on the left side of the screen** You can change the position and size of the widget.

Installation

Minimum Requirements

  • WordPress 4.7 or greater
  • PHP version 5.4 or greater
  • MySQL version 5.0 or greater

We recommend your host supports:

  • PHP version 7.0 or greater
  • MySQL version 5.6 or greater
  • WordPress Memory limit of 64 MB or greater (128 MB or higher is preferred)

Installation

  1. Install using the WordPress built-in Plugin installer, or extract the zip file and drop the contents in the wp-content/plugins/ directory of your WordPress installation.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Go to settings > Blackout to customize the configurations of the widget (optional).

FAQ

Why do I need this plugin?

Because it’s the easiest way to add dark mode to your WordPress website.

Do I need to know how to code to use Blackout?

No, you don’t and that’s the main reason that I created this plugin, so you can integrate a dark mode solutions without touching any code.

Why it doesn’t work in all browsers?

This widget uses the CSS mix-blend-mode: difference; in order to provide the dark mode. It may not be compatible with all the browsers.

Check the compatibility here: https://caniuse.com/#search=mix-blend-mode

Reviews

September 28, 2019
Incredible! I've been waiting for this for so long, I can't believe this finally exists so that my blinding white website can have a dark mode for sensitive eyes, including mine. I got some photos that look like they're negatives (inverted colors) but i think i can fix that by removing my background picture. Thank you! Thank you! Thank you!
September 6, 2019
The way this dark mode works (the JS library it uses) is one of the best I've seen. I hope customization gets better. The size adjustment sliders in the backend aren't the greatest.
August 16, 2019
I am impressed how convenient this plugin is. It does what it says, works out of the box. Pretty impressive. However, I had one particular issue with my theme. I asked the author if it's possible to fix it. And what can I say? He took the time to test it and write an individual solution for me, answer me many emails until we finally achieved it. I am very grateful about this excellent support. Thanks, José!
August 12, 2019
The plugin does what it promises - easily add a second, dark "theme" to your website that can be (de)activated with a click. The support helped me with my problem of having the images' colors distorted: set pure black as the background color and the pictures will look just like in normal mode. What I would wish for as features is being able to set the different text and background colors from within the plugin's settings without having to change the CSS myself. And maybe change the button's icon from within the plugin. Thank you and keep up the great work!
July 25, 2019
Does exactly what it says: allows a newbie like myself to merely install and activate it to have it working. The settings are also simple and adequate. Perfect.
Read all 5 reviews

Contributors & Developers

“Blackout: Dark Mode Widget” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

1.3.0 – 2019-08-22

  • New Feature Now you can enable or disable the creation of cookies and the match OS features.

1.2.0 – 2019-08-13

  • Darkmode now detects automatically when the OS is using dark mode (if the browsers supports prefers-color-scheme).

1.1.0 – 2019-07-30

  • New Feature: Added pre-defined positions for people that don’t want to tinker the custom settings.
  • Bug fix: Now the .darkmode-ignore class is added and removed on toggle, this way the items that you add the class manually won’t have the mix-blend-mode:difference CSS style applied to them when not in dark mode.
  • Re-organized the settings page.

1.0.2 – 2019-07-08

  • Bug fix: Solved a bug where the darkmode-ignore class wasn’t being removed when toggling or being in “light-mode”

1.0.1 – 2019-07-07

  • New Feature: Added a checkbox so you can choose if the widget is shown in all pages or only in posts.
  • Now it ignores all iframes and images.

1.0.0 – 2019-06-28

  • Initial Release