Blackout: Dark Mode Widget

外掛說明

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

Want to receive updates on your email?

Yes, I want!

Want to use your own widget or element as toggle?

Go to the Blackout settings page, and mark the last checkbox with the label Want to use your own toggle widget or button?, then add the class darkmode-enable to the element that you want to use as toggle.

螢幕擷圖

  • 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.

安裝方式

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).

常見問題集

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

Can I use my own widget or element as toggle?

Yes, to do it you just need to go to the Blackout settings page, and mark the last checkbox with the label Want to use your own toggle widget or button?, then add the class darkmode-enable to the element that you want to use as toggle.

使用者評論

2021 年 3 月 1 日
This would be a 5-star review if this plugin did any of the things it is claimed to be able to do. After doing the setup no widget or buttons appeared anywhere in the website. The instructions called for pasting some javascript but gave no clue about where or in what file to paste the script! Instructions on what file to put the widget in or where in the theme were similarly missing. Clearly, neither this plugin nor its documentation had been tested before the plugin was released.
2020 年 9 月 6 日
it is a good dark mode plugin but needs improvements. Why does it change the colors of images and Google ads? Also, add a toggle. If you can improve that then I think it would be a perfect dark mode plugin. Thanks.
2020 年 4 月 1 日
would be great that there also will be an option to use this plugin as a toggle, not only as a widget. and some manual or help documentation could be great. just found some info on the site. but wasn't able to solve my case.
2020 年 1 月 29 日
With this plug it is much easier to read text on a monitor or display. A toggle as a pre setting for al pages, would be even better.
2019 年 9 月 28 日
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!
閱讀全部 10 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Blackout: Dark Mode Widget〉的開發相關工作。

參與者

Blackout: Dark Mode Widget 外掛目前已有 6 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將 Blackout: Dark Mode Widget 外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

2.0.4 – 2020-08-22

  • Fixed issue with the custom toggle.
  • Now the background color won’t be change when darkmode isn’t active.

2.0.3 – 2020-08-15

  • Replaced all the jQuery with vanilla JavaScript.

2.0.2 – 2020-08-14

  • Modified how the sizes work, changes from rem to px.

2.0.1 – 2020-08-08

  • Fixed the Cookies and Match OS features. Many thanks to @phillipjohnston

2.0.0 – 2020-07-04

  • New Feature Now you can use your own widget or element by enabling the option in the settings page then adding the class darkmode-enable to the element that you want to use as toggle.
  • NOW ADDING PX AT YOUR POSITIONS IS MANDATORY!!!

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