Blackout: Dark Mode Widget for WordPress
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.
Check out the demo in these websites:
These have the widget, but not the WordPress plugin
- https://tradivegan.com (with custom label)
- https://what.toeat.in (with custom label)
- https://www.kanbanote.com (without the widget, once logged in)
- https://www.sandoche.com (with custom label)
📖 How to use
As with any other WordPress plugin, you can follow this simple steps to install it:
- 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.
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- Go to settings > Blackout to customize the configurations of the widget (optional).
- Use the class
darkmode-ignorewhere you don't want to apply darkmode, it will implement
mix-blend-mode: difference;but only when the widget is active, that way it won't look weird if it's disabled.
You don't need to do it with images or iframes as it's added by default.
This library 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
⭐ Show your support
Also, if it helped you it would be awesome if you could leave a review in WordPress, you can do that by clicking here.
Want to help?
If you like this plugin, feel free to donate:
- Donation Page (Paypal and Credit Card with Stripe)
- Bitcoin: 12Nth97LEFYFiWJ66PEhHfWbwFPT8fnznN
- Ethereum: 0x6a5bF47fef1fC52BC41ca190b11E05Ac95490D0a
- BAT (Basic Attention Token): 0x6a5bF47fef1fC52BC41ca190b11E05Ac95490D0a
- Litecoin: LLce6WFs2SVrp5s