{"id":105741,"date":"2019-06-28T05:02:38","date_gmt":"2019-06-28T05:02:38","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/darky\/"},"modified":"2020-12-13T08:05:10","modified_gmt":"2020-12-13T08:05:10","slug":"blackout-darkmode-widget","status":"closed","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/blackout-darkmode-widget\/","author":17169689,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.0.4","stable_tag":"2.0.4","tested":"5.6.17","requires":"4.7","requires_php":"5.4","requires_plugins":"","header_name":"Blackout: Dark Mode Widget","header_author":"Jos\u00e9 Sotelo","header_description":"Simple plugin that creates a widget that enables dark mode on click.","assets_banners_color":"303030","last_updated":"2020-12-13 08:05:10","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/compras.inboundlatino.com\/blackout\/","header_plugin_uri":"","header_author_uri":"https:\/\/inboundlatino.com","rating":4.3,"author_block_rating":0,"active_installs":70,"downloads":22192,"num_ratings":0,"support_threads":1,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0":{"tag":"1.0","author":"josesotelocohen","date":"2020-07-05 03:39:07"},"1.3.0":{"tag":"1.3.0","author":"josesotelocohen","date":"2020-07-05 03:39:07"},"2.0.0":{"tag":"2.0.0","author":"josesotelocohen","date":"2020-07-05 03:52:22"},"2.0.1":{"tag":"2.0.1","author":"josesotelocohen","date":"2020-08-15 00:46:15"},"2.0.2":{"tag":"2.0.2","author":"josesotelocohen","date":"2020-08-15 00:46:15"},"2.0.3":{"tag":"2.0.3","author":"josesotelocohen","date":"2020-08-16 02:35:35"},"2.0.4":{"tag":"2.0.4","author":"josesotelocohen","date":"2020-12-13 08:05:10"}},"upgrade_notice":[],"ratings":{"1":"1","2":0,"3":"1","4":"1","5":"7"},"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":2113977,"resolution":"256x256","location":"assets","locale":""},"icon-512x512.png":{"filename":"icon-512x512.png","revision":2113977,"resolution":"512x512","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":2113977,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":2113977,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0","1.3.0","2.0.0","2.0.1","2.0.2","2.0.3","2.0.4"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2113977,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":2113977,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":2113977,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":2113977,"resolution":"4","location":"assets","locale":""}},"screenshots":{"1":"<strong>Positioning<\/strong>: Edit the position fields to customize the widget positioning.","2":"<strong>Middle Right<\/strong>: By changing the button input to 50% you can place the widget at the middle of the screen, in the right side.","3":"<strong>Sizes<\/strong>: You can make the widget and icon bigger or smaller by using the range inputs in the settings.","4":"<strong>Bigger<\/strong>: widget and icon on the left side of the screen** You can change the position and size of the widget."},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[12734,173231,173298,172542,173299],"plugin_category":[],"plugin_contributors":[171756,173300],"plugin_business_model":[],"class_list":["post-105741","plugin","type-plugin","status-closed","hentry","plugin_tags-dark","plugin_tags-dark-mode","plugin_tags-dark-mode-widget","plugin_tags-darkmode","plugin_tags-darkmode-widget","plugin_contributors-josesotelocohen","plugin_contributors-sandoche","plugin_committers-josesotelocohen","plugin_support_reps-josesotelocohen"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/blackout-darkmode-widget_303030.svg","icon_2x":false,"generated":true},"screenshots":[{"src":"https:\/\/ps.w.org\/blackout-darkmode-widget\/assets\/screenshot-1.png?rev=2113977","caption":"<strong>Positioning<\/strong>: Edit the position fields to customize the widget positioning."},{"src":"https:\/\/ps.w.org\/blackout-darkmode-widget\/assets\/screenshot-2.png?rev=2113977","caption":"<strong>Middle Right<\/strong>: By changing the button input to 50% you can place the widget at the middle of the screen, in the right side."},{"src":"https:\/\/ps.w.org\/blackout-darkmode-widget\/assets\/screenshot-3.png?rev=2113977","caption":"<strong>Sizes<\/strong>: You can make the widget and icon bigger or smaller by using the range inputs in the settings."},{"src":"https:\/\/ps.w.org\/blackout-darkmode-widget\/assets\/screenshot-4.png?rev=2113977","caption":"<strong>Bigger<\/strong>: widget and icon on the left side of the screen** You can change the position and size of the widget."}],"raw_content":"<!--section=description-->\n<p>A simple solution to allow your users to enable\/disable dark mode on your website.<\/p>\n\n<p>It creates a widget that your users can use to toggle between normal and dark modes.<\/p>\n\n<p>It uses the CSS mix-blend-mode to bring dark-mode to any of your websites.<\/p>\n\n<p>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 <a href=\"https:\/\/darkmodejs.learn.uno\/\">clicking here<\/a>.<\/p>\n\n<p><strong>Do you have an issue or a feature request?<\/strong><\/p>\n\n<p>Please submit it in our <a href=\"https:\/\/github.com\/JoseSoteloCohen\/Blackout-WordPress-Dark-mode-Widget\/issues\">Github Repo<\/a><\/p>\n\n<p><strong>Want to receive updates on your email?<\/strong><\/p>\n\n<p><a href=\"https:\/\/sendfox.com\/lp\/1jovzq\">Yes, I want!<\/a><\/p>\n\n<p><strong>Want to use your own widget or element as toggle?<\/strong><\/p>\n\n<p>Go to the Blackout settings page, and mark the last checkbox with the label <strong>Want to use your own toggle widget or button?<\/strong>, then add the class <code>darkmode-enable<\/code> to the element that you want to use as toggle.<\/p>\n\n<!--section=installation-->\n<h4>Minimum Requirements<\/h4>\n\n<ul>\n<li>WordPress 4.7 or greater<\/li>\n<li>PHP version 5.4 or greater<\/li>\n<li>MySQL version 5.0 or greater<\/li>\n<\/ul>\n\n<h4>We recommend your host supports:<\/h4>\n\n<ul>\n<li>PHP version 7.0 or greater<\/li>\n<li>MySQL version 5.6 or greater<\/li>\n<li>WordPress Memory limit of 64 MB or greater (128 MB or higher is preferred)<\/li>\n<\/ul>\n\n<h4>Installation<\/h4>\n\n<ol>\n<li>Install using the WordPress built-in Plugin installer, or extract the zip file and drop the contents in the <code>wp-content\/plugins\/<\/code> directory of your WordPress installation.<\/li>\n<li>Activate the plugin through the 'Plugins' menu in WordPress.<\/li>\n<li>Go to settings &gt; Blackout to customize the configurations of the widget (optional).<\/li>\n<\/ol>\n\n<!--section=faq-->\n<dl>\n<dt><h3>Why do I need this plugin?<\/h3><\/dt>\n<dd><p>Because it's the easiest way to add dark mode to your WordPress website.<\/p><\/dd>\n<dt><h3>Do I need to know how to code to use Blackout?<\/h3><\/dt>\n<dd><p>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.<\/p><\/dd>\n<dt><h3>Why it doesn't work in all browsers?<\/h3><\/dt>\n<dd><p>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.<\/p>\n\n<p>Check the compatibility here: <a href=\"https:\/\/caniuse.com\/#search=mix-blend-mode\">https:\/\/caniuse.com\/#search=mix-blend-mode<\/a><\/p><\/dd>\n<dt><h3>Can I use my own widget or element as toggle?<\/h3><\/dt>\n<dd><p>Yes, to do it you just need to go to the Blackout settings page, and mark the last checkbox with the label <strong>Want to use your own toggle widget or button?<\/strong>, then add the class <code>darkmode-enable<\/code> to the element that you want to use as toggle.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.0.4 - 2020-08-22<\/h4>\n\n<ul>\n<li>Fixed issue with the custom toggle.<\/li>\n<li>Now the background color won't be change when darkmode isn't active.<\/li>\n<\/ul>\n\n<h4>2.0.3 - 2020-08-15<\/h4>\n\n<ul>\n<li>Replaced all the jQuery with vanilla JavaScript.<\/li>\n<\/ul>\n\n<h4>2.0.2 - 2020-08-14<\/h4>\n\n<ul>\n<li>Modified how the sizes work, changes from rem to px.<\/li>\n<\/ul>\n\n<h4>2.0.1 - 2020-08-08<\/h4>\n\n<ul>\n<li>Fixed the Cookies and Match OS features. Many thanks to @phillipjohnston<\/li>\n<\/ul>\n\n<h4>2.0.0 - 2020-07-04<\/h4>\n\n<ul>\n<li><strong>New Feature<\/strong> Now you can use your own widget or element by enabling the option in the settings page then adding the class <code>darkmode-enable<\/code> to the element that you want to use as toggle.<\/li>\n<li>NOW ADDING PX AT YOUR POSITIONS IS MANDATORY!!!<\/li>\n<\/ul>\n\n<h4>1.3.0 - 2019-08-22<\/h4>\n\n<ul>\n<li><strong>New Feature<\/strong> Now you can enable or disable the creation of cookies and the match OS features.<\/li>\n<\/ul>\n\n<h4>1.2.0 - 2019-08-13<\/h4>\n\n<ul>\n<li>Darkmode now detects automatically when the OS is using dark mode (if the browsers supports prefers-color-scheme).<\/li>\n<\/ul>\n\n<h4>1.1.0 - 2019-07-30<\/h4>\n\n<ul>\n<li><strong>New Feature:<\/strong> Added pre-defined positions for people that don't want to tinker the custom settings.<\/li>\n<li><strong>Bug fix<\/strong>: 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.<\/li>\n<li>Re-organized the settings page.<\/li>\n<\/ul>\n\n<h4>1.0.2 - 2019-07-08<\/h4>\n\n<ul>\n<li><strong>Bug fix<\/strong>: Solved a bug where the darkmode-ignore class wasn't being removed when toggling or being in \"light-mode\"<\/li>\n<\/ul>\n\n<h4>1.0.1 - 2019-07-07<\/h4>\n\n<ul>\n<li><strong>New Feature:<\/strong> Added a checkbox so you can choose if the widget is shown in all pages or only in posts.<\/li>\n<li>Now it ignores all iframes and images.<\/li>\n<\/ul>\n\n<h4>1.0.0 - 2019-06-28<\/h4>\n\n<ul>\n<li>Initial Release<\/li>\n<\/ul>","raw_excerpt":"A plugin that creates a widget that enables dark mode on click.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/105741","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=105741"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/josesotelocohen"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=105741"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=105741"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=105741"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=105741"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=105741"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=105741"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}