{"id":185260,"date":"2024-04-27T10:44:38","date_gmt":"2024-04-27T10:44:38","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/darkify\/"},"modified":"2026-08-26T10:40:57","modified_gmt":"2026-08-26T10:40:57","slug":"darkify","status":"publish","type":"plugin","link":"https:\/\/frp.wordpress.org\/plugins\/darkify\/","author":17191848,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.1.1","stable_tag":"2.1.1","tested":"7.1","requires":"5.5","requires_php":"7.1","requires_plugins":null,"header_name":"Darkify","header_author":"ThemeAtelier","header_description":"Darkify is for a stylish, modern darkmode look that people love.","assets_banners_color":"7e808d","last_updated":"2026-08-26 10:40:57","external_support_url":"https:\/\/darkifywp.com\/","external_repository_url":"","donate_link":"","header_plugin_uri":"https:\/\/darkifywp.com\/","header_author_uri":"https:\/\/themeatelier.net\/","rating":4.8,"author_block_rating":0,"active_installs":700,"downloads":22614,"num_ratings":22,"support_threads":1,"support_threads_resolved":1,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.1":{"tag":"1.0.1","author":"themeatelier","date":"2024-07-04 07:38:32"},"1.1.0":{"tag":"1.1.0","author":"themeatelier","date":"2024-06-13 12:21:04"},"1.2.0":{"tag":"1.2.0","author":"themeatelier","date":"2024-07-04 07:45:51"},"1.2.1":{"tag":"1.2.1","author":"themeatelier","date":"2024-11-08 06:24:28"},"1.2.2":{"tag":"1.2.2","author":"themeatelier","date":"2024-11-19 07:09:26"},"1.2.3":{"tag":"1.2.3","author":"themeatelier","date":"2024-12-15 08:40:53"},"1.2.4":{"tag":"1.2.4","author":"themeatelier","date":"2025-03-03 03:39:29"},"1.2.5":{"tag":"1.2.5","author":"themeatelier","date":"2025-03-19 04:26:34"},"1.3.0":{"tag":"1.3.0","author":"themeatelier","date":"2025-03-21 01:44:11"},"1.3.1":{"tag":"1.3.1","author":"themeatelier","date":"2025-03-21 05:21:09"},"1.3.2":{"tag":"1.3.2","author":"themeatelier","date":"2025-03-24 01:22:28"},"1.3.3":{"tag":"1.3.3","author":"themeatelier","date":"2025-04-06 04:29:11"},"1.3.4":{"tag":"1.3.4","author":"themeatelier","date":"2025-04-08 10:12:25"},"1.3.5":{"tag":"1.3.5","author":"themeatelier","date":"2025-04-22 06:13:37"},"1.4.0":{"tag":"1.4.0","author":"themeatelier","date":"2025-05-15 14:11:37"},"1.4.1":{"tag":"1.4.1","author":"themeatelier","date":"2025-05-21 11:46:46"},"1.4.10":{"tag":"1.4.10","author":"themeatelier","date":"2025-09-23 04:03:01"},"1.4.11":{"tag":"1.4.11","author":"themeatelier","date":"2025-09-24 04:35:29"},"1.4.12":{"tag":"1.4.12","author":"themeatelier","date":"2025-10-25 06:01:08"},"1.4.13":{"tag":"1.4.13","author":"themeatelier","date":"2025-11-12 13:00:36"},"1.4.14":{"tag":"1.4.14","author":"themeatelier","date":"2025-11-15 09:57:18"},"1.4.15":{"tag":"1.4.15","author":"themeatelier","date":"2025-11-21 08:35:28"},"1.4.16":{"tag":"1.4.16","author":"themeatelier","date":"2025-12-16 06:25:46"},"1.4.17":{"tag":"1.4.17","author":"themeatelier","date":"2025-12-16 08:55:46"},"1.4.18":{"tag":"1.4.18","author":"themeatelier","date":"2026-01-01 13:16:36"},"1.4.19":{"tag":"1.4.19","author":"themeatelier","date":"2026-01-01 13:16:36"},"1.4.2":{"tag":"1.4.2","author":"themeatelier","date":"2025-05-26 08:19:55"},"1.4.20":{"tag":"1.4.20","author":"themeatelier","date":"2026-01-23 11:42:36"},"1.4.21":{"tag":"1.4.21","author":"faysal61","date":"2026-02-07 11:44:30"},"1.4.22":{"tag":"1.4.22","author":"faysal61","date":"2026-02-18 06:27:05"},"1.4.23":{"tag":"1.4.23","author":"faysal61","date":"2026-02-26 12:49:53"},"1.4.24":{"tag":"1.4.24","author":"faysal61","date":"2026-03-13 00:25:14"},"1.4.25":{"tag":"1.4.25","author":"faysal61","date":"2026-03-31 10:38:37"},"1.4.26":{"tag":"1.4.26","author":"faysal61","date":"2026-04-17 03:49:14"},"1.4.3":{"tag":"1.4.3","author":"themeatelier","date":"2025-06-01 10:38:22"},"1.4.4":{"tag":"1.4.4","author":"themeatelier","date":"2025-06-23 10:08:09"},"1.4.5":{"tag":"1.4.5","author":"themeatelier","date":"2025-07-17 04:25:29"},"1.4.6":{"tag":"1.4.6","author":"themeatelier","date":"2025-08-11 14:27:32"},"1.4.7":{"tag":"1.4.7","author":"themeatelier","date":"2025-08-30 08:46:40"},"1.4.8":{"tag":"1.4.8","author":"themeatelier","date":"2025-08-30 14:29:36"},"1.4.9":{"tag":"1.4.9","author":"themeatelier","date":"2025-09-17 06:01:18"},"1.5.0":{"tag":"1.5.0","author":"faysal61","date":"2026-04-27 05:06:09"},"1.5.1":{"tag":"1.5.1","author":"faysal61","date":"2026-05-04 09:54:43"},"1.5.2":{"tag":"1.5.2","author":"faysal61","date":"2026-05-05 12:34:32"},"1.5.3":{"tag":"1.5.3","author":"faysal61","date":"2026-05-19 13:35:38"},"1.5.4":{"tag":"1.5.4","author":"faysal61","date":"2026-06-16 06:49:10"},"1.5.5":{"tag":"1.5.5","author":"faysal61","date":"2026-06-24 05:50:31"},"2.0.0":{"tag":"2.0.0","author":"faysal61","date":"2026-07-28 11:17:34"},"2.0.1":{"tag":"2.0.1","author":"faysal61","date":"2026-08-04 04:05:58"},"2.0.2":{"tag":"2.0.2","author":"faysal61","date":"2026-08-10 09:38:54"},"2.0.3":{"tag":"2.0.3","author":"faysal61","date":"2026-08-11 09:00:00"},"2.0.4":{"tag":"2.0.4","author":"faysal61","date":"2026-08-18 06:35:37"},"2.1.0":{"tag":"2.1.0","author":"faysal61","date":"2026-08-25 12:03:52"},"2.1.1":{"tag":"2.1.1","author":"faysal61","date":"2026-08-26 10:40:57"}},"upgrade_notice":{"":"<p>Update to the latest version for new features, improvements, and bug fixes.<\/p>"},"ratings":{"1":1,"2":0,"3":0,"4":0,"5":21},"assets_icons":{"icon-256x256.gif":{"filename":"icon-256x256.gif","revision":3625820,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.gif":{"filename":"banner-1544x500.gif","revision":3625798,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.gif":{"filename":"banner-772x250.gif","revision":3625798,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3666782,"resolution":false,"location":"assets","locale":"","contents":"{\"landingPage\":\"wp-admin\\\/index.php?page=darkify\",\"preferredVersions\":{\"php\":\"8.0\",\"wp\":\"latest\"},\"phpExtensionBundles\":[\"kitchen-sink\"],\"features\":{\"networking\":true},\"steps\":[{\"step\":\"installPlugin\",\"options\":{\"activate\":true},\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"darkify\"}},{\"step\":\"login\",\"username\":\"admin\",\"password\":\"password\"}]}"}},"all_blocks":{"darkify\/switcher":{"apiVersion":2,"name":"darkify\/switcher","title":"Dark Mode Switcher","category":"widgets","icon":"visibility","description":"Easily place a dark mode switch anywhere on your website. Fully customizable and powered by Darkify for a smooth light\/dark experience.","textdomain":"darkify","editorScript":"file:.\/build\/index.js","editorStyle":"file:.\/build\/index.css","style":"darkify-client-main","supports":{"styles":false,"html":false},"attributes":{"style":{"type":"string","default":"classic"},"size":{"type":"string","default":"1.0"},"custom_size":{"type":"number","default":100},"switch_bg_light":{"type":"string","default":"#121116"},"switch_bg_dark":{"type":"string","default":"#ffffff"},"light_icon_color":{"type":"string","default":"#ffffff"},"dark_icon_color":{"type":"string","default":"#121116"},"light_text_color":{"type":"string","default":"#121116"},"dark_text_color":{"type":"string","default":"#ffffff"},"border_width":{"type":"number","default":0},"border_light_color":{"type":"string","default":"#121116"},"border_dark_color":{"type":"string","default":"#ffffff"},"border_radius":{"type":"number","default":7},"alignment":{"type":"string","default":"left"},"preview":{"type":"boolean","default":false}},"example":{"attributes":{"preview":true}}}},"tagged_versions":["1.0.1","1.1.0","1.2.0","1.2.1","1.2.2","1.2.3","1.2.4","1.2.5","1.3.0","1.3.1","1.3.2","1.3.3","1.3.4","1.3.5","1.4.0","1.4.1","1.4.10","1.4.11","1.4.12","1.4.13","1.4.14","1.4.15","1.4.16","1.4.17","1.4.18","1.4.19","1.4.2","1.4.20","1.4.21","1.4.22","1.4.23","1.4.24","1.4.25","1.4.26","1.4.3","1.4.4","1.4.5","1.4.6","1.4.7","1.4.8","1.4.9","1.5.0","1.5.1","1.5.2","1.5.3","1.5.4","1.5.5","2.0.0","2.0.1","2.0.2","2.0.3","2.0.4","2.1.0","2.1.1"],"block_files":[],"assets_screenshots":{"screenshot-1.gif":{"filename":"screenshot-1.gif","revision":3625798,"resolution":"1","location":"assets","locale":"","width":800,"height":469},"screenshot-10.png":{"filename":"screenshot-10.png","revision":3625798,"resolution":"10","location":"assets","locale":"","width":3036,"height":1512},"screenshot-11.png":{"filename":"screenshot-11.png","revision":3625798,"resolution":"11","location":"assets","locale":"","width":3036,"height":1512},"screenshot-12.png":{"filename":"screenshot-12.png","revision":3625798,"resolution":"12","location":"assets","locale":"","width":3036,"height":1512},"screenshot-13.png":{"filename":"screenshot-13.png","revision":3625798,"resolution":"13","location":"assets","locale":"","width":1280,"height":830},"screenshot-14.png":{"filename":"screenshot-14.png","revision":3625798,"resolution":"14","location":"assets","locale":"","width":2000,"height":1315},"screenshot-15.png":{"filename":"screenshot-15.png","revision":3625798,"resolution":"15","location":"assets","locale":"","width":1280,"height":830},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3625798,"resolution":"2","location":"assets","locale":"","width":1440,"height":799},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3625798,"resolution":"3","location":"assets","locale":"","width":1440,"height":799},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3625798,"resolution":"4","location":"assets","locale":"","width":3036,"height":1512},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3625798,"resolution":"5","location":"assets","locale":"","width":3036,"height":1512},"screenshot-6.png":{"filename":"screenshot-6.png","revision":3625798,"resolution":"6","location":"assets","locale":"","width":3036,"height":1512},"screenshot-7.png":{"filename":"screenshot-7.png","revision":3625798,"resolution":"7","location":"assets","locale":"","width":3036,"height":1512},"screenshot-8.png":{"filename":"screenshot-8.png","revision":3625798,"resolution":"8","location":"assets","locale":"","width":3036,"height":1512},"screenshot-9.png":{"filename":"screenshot-9.png","revision":3625798,"resolution":"9","location":"assets","locale":"","width":3036,"height":1512}},"screenshots":{"1":"WordPress dark mode in action \u2014 one click on the floating switch turns the whole site dark, instantly and with no page reload.","2":"Gutenberg block editor dark mode \u2014 write and edit posts and pages in a comfortable dark WordPress editor interface.","3":"WooCommerce dark mode \u2014 shop, product, and category pages converted to a dark theme automatically, with product images kept readable.","4":"Frontend dark mode controls \u2014 enable dark mode for visitors, set default dark mode, OS aware (system preference) dark mode, keyboard shortcut, and time based automatic dark mode, with a live preview of your site.","5":"Admin dark mode controls \u2014 turn on WordPress admin dashboard dark mode, Block Editor (Gutenberg) dark mode, and Classic Editor dark mode independently, plus page exclusions and custom admin dark mode CSS.","6":"Dark mode for the WordPress admin dashboard \u2014 the Darkify settings screen itself shown in dark mode for eye-friendly, low-light editing.","7":"Floating dark mode switch styles \u2014 choose from 15 animated toggle designs, set switch size, position, background and icon colors, and preview changes live.","8":"Dark mode color presets \u2014 pick from 11 ready-made dark color schemes (Carbon Mist, Midnight Reverie, Verdant Depths, Celestial Tide, Emberwood and more), then fine-tune background, text, and link colors.","9":"Dark mode image controls \u2014 adjust image brightness and grayscale so photos and product images stay clear on dark backgrounds, with per-image exclusions.","10":"Dark mode video controls \u2014 set video brightness and grayscale, or swap in a dark mode version of self-hosted, YouTube, Vimeo, and Dailymotion videos.","11":"Custom dark mode CSS \u2014 add your own CSS that loads only when dark mode is active, plus CSS that applies in both light and dark mode.","12":"Backup and restore dark mode settings \u2014 export your Darkify configuration as a JSON file and import it to migrate settings to another WordPress site.","13":"Dark mode toggle Gutenberg block \u2014 drop a dark mode switcher block into any post or page and style it from the block sidebar.","14":"Dark mode color themes in the block editor \u2014 switch the Gutenberg editor color scheme straight from the toolbar and preview your content in every dark preset.","15":"Elementor dark mode widget \u2014 add the Darkify dark mode switcher to any Elementor page or template and choose your switch style."}},"plugin_section":[],"plugin_tags":[12734,173231,24155,163960,173232],"plugin_category":[34],"plugin_contributors":[253983,229223,225182,253984,213771],"plugin_business_model":[216238],"class_list":["post-185260","plugin","type-plugin","status-publish","hentry","plugin_tags-dark","plugin_tags-dark-mode","plugin_tags-dark-theme","plugin_tags-night-mode","plugin_tags-wordpress-dark-mode","plugin_category-accessibility","plugin_contributors-darkify","plugin_contributors-faysal61","plugin_contributors-shshakib2001","plugin_contributors-tamimaziz","plugin_contributors-themeatelier","plugin_business_model-commercial","plugin_committers-faysal61","plugin_committers-themeatelier","plugin_support_reps-faysal61","plugin_support_reps-shshakib2001","plugin_support_reps-tamimaziz"],"banners":{"banner":"https:\/\/ps.w.org\/darkify\/assets\/banner-772x250.gif?rev=3625798","banner_2x":"https:\/\/ps.w.org\/darkify\/assets\/banner-1544x500.gif?rev=3625798","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/darkify\/assets\/icon-256x256.gif?rev=3625820","icon_2x":"https:\/\/ps.w.org\/darkify\/assets\/icon-256x256.gif?rev=3625820","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-1.gif?rev=3625798","caption":"WordPress dark mode in action \u2014 one click on the floating switch turns the whole site dark, instantly and with no page reload."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-2.png?rev=3625798","caption":"Gutenberg block editor dark mode \u2014 write and edit posts and pages in a comfortable dark WordPress editor interface."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-3.png?rev=3625798","caption":"WooCommerce dark mode \u2014 shop, product, and category pages converted to a dark theme automatically, with product images kept readable."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-4.png?rev=3625798","caption":"Frontend dark mode controls \u2014 enable dark mode for visitors, set default dark mode, OS aware (system preference) dark mode, keyboard shortcut, and time based automatic dark mode, with a live preview of your site."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-5.png?rev=3625798","caption":"Admin dark mode controls \u2014 turn on WordPress admin dashboard dark mode, Block Editor (Gutenberg) dark mode, and Classic Editor dark mode independently, plus page exclusions and custom admin dark mode CSS."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-6.png?rev=3625798","caption":"Dark mode for the WordPress admin dashboard \u2014 the Darkify settings screen itself shown in dark mode for eye-friendly, low-light editing."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-7.png?rev=3625798","caption":"Floating dark mode switch styles \u2014 choose from 15 animated toggle designs, set switch size, position, background and icon colors, and preview changes live."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-8.png?rev=3625798","caption":"Dark mode color presets \u2014 pick from 11 ready-made dark color schemes (Carbon Mist, Midnight Reverie, Verdant Depths, Celestial Tide, Emberwood and more), then fine-tune background, text, and link colors."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-9.png?rev=3625798","caption":"Dark mode image controls \u2014 adjust image brightness and grayscale so photos and product images stay clear on dark backgrounds, with per-image exclusions."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-10.png?rev=3625798","caption":"Dark mode video controls \u2014 set video brightness and grayscale, or swap in a dark mode version of self-hosted, YouTube, Vimeo, and Dailymotion videos."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-11.png?rev=3625798","caption":"Custom dark mode CSS \u2014 add your own CSS that loads only when dark mode is active, plus CSS that applies in both light and dark mode."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-12.png?rev=3625798","caption":"Backup and restore dark mode settings \u2014 export your Darkify configuration as a JSON file and import it to migrate settings to another WordPress site."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-13.png?rev=3625798","caption":"Dark mode toggle Gutenberg block \u2014 drop a dark mode switcher block into any post or page and style it from the block sidebar."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-14.png?rev=3625798","caption":"Dark mode color themes in the block editor \u2014 switch the Gutenberg editor color scheme straight from the toolbar and preview your content in every dark preset."},{"src":"https:\/\/ps.w.org\/darkify\/assets\/screenshot-15.png?rev=3625798","caption":"Elementor dark mode widget \u2014 add the Darkify dark mode switcher to any Elementor page or template and choose your switch style."}],"raw_content":"<!--section=description-->\n<p>Darkify adds <strong>WordPress Dark Mode<\/strong> and <strong>Night Mode<\/strong> to both the website frontend and the WordPress admin dashboard. Visitors can switch between light and dark themes using a toggle, while site owners control how dark mode behaves across the frontend, admin panel, and editors.<\/p>\n\n<p>Darkify supports <strong>frontend dark mode<\/strong>, <strong>admin dashboard dark mode<\/strong>, and <strong>editor-specific dark mode<\/strong> for Gutenberg (Block Editor) and the Classic Editor. It includes OS-aware detection, default dark mode, time-based scheduling, keyboard shortcuts, and multiple toggle placement options. Designed for performance and compatibility, Darkify works seamlessly with popular WordPress themes, page builders, and WooCommerce \u2014 without modifying theme files or requiring custom code.<\/p>\n\n<p>Site owners can customize dark mode colors, switches, media handling, and element visibility. Darkify also provides controls for images, videos, scrollbars, mobile behavior, and page or element-level targeting to ensure dark mode integrates cleanly with different themes, builders, and layouts.<\/p>\n\n<h4>How Darkify Works<\/h4>\n\n<p>Darkify applies dark mode styling using configurable rules rather than modifying theme files. You can enable dark mode globally or limit it to specific areas, pages, posts, or elements. Settings can be adjusted from a centralized admin panel and reused across different sites using import and export tools.<\/p>\n\n<p>Darkify is designed to work with popular WordPress themes, page builders, and multisite installations, allowing dark mode to be configured without requiring custom code.<\/p>\n\n<h4>Why Choose Darkify?<\/h4>\n\n<p>\u2714 Dark mode for frontend and admin dashboard<br \/>\n\u2714 Works with Gutenberg, Elementor, and popular builders<br \/>\n\u2714 OS-aware, scheduled, and manual switching<br \/>\n\u2714 Lightweight and performance-focused<br \/>\n\u2714 No theme modification required<\/p>\n\n<p>[youtube https:\/\/www.youtube.com\/watch?v=camMkoEa_4Q&amp;list=PL_Vf9qsWW467H24WgSPp7eFtl-7LFBeIq]<\/p>\n\n<p><strong><a href=\"https:\/\/darkifywp.com\/\">Live Demo<\/a> | <a href=\"https:\/\/wordpress.org\/support\/plugin\/darkify\/\">Support<\/a> | <a href=\"https:\/\/darkifywp.com\/docs\/\">Documentation<\/a> | <a href=\"https:\/\/darkifywp.com\/pricing\/?ref=1\">Upgrade to Pro!<\/a><\/strong><\/p>\n\n<h4>Key Features of Darkify Dark mode Plugin<\/h4>\n\n<ul>\n<li><p><strong>Frontend Dark Mode<\/strong>: Enable dark mode on the public-facing website and allow visitors to switch between light and dark themes using a toggle.<\/p><\/li>\n<li><p><strong>Admin Dashboard Dark Mode<\/strong>: Apply dark mode to the WordPress admin area to provide a darker interface while managing site content and settings.<\/p><\/li>\n<li><p><strong>Editor-Specific Dark Mode<\/strong>: Enable dark mode independently for the WordPress Admin Panel, Block Editor (Gutenberg), and Classic Editor \u2014 darken the editor while the rest of the dashboard stays light, or the other way around.<\/p><\/li>\n<li><p><strong>Admin &amp; Editor Color Presets<\/strong>: Choose a color preset for the WordPress admin and a separate one for the Block Editor. Both default to Auto, which derives a shade for every color on screen rather than forcing one background and one text color \u2014 so admin screens added by other plugins come out readable without being configured first.<\/p><\/li>\n<li><p><strong>Default Dark Mode<\/strong>: Load the website in dark mode by default while allowing visitors to switch back to light mode at any time.<\/p><\/li>\n<li><p><strong>OS-Aware Dark Mode<\/strong>: Detect the visitor\u2019s operating system preference and automatically apply light or dark mode accordingly.<\/p><\/li>\n<li><p><strong>Time-Based Dark Mode<\/strong>: Schedule automatic switching between light and dark mode based on a defined time range.<\/p><\/li>\n<li><p><strong>Keyboard Shortcut<\/strong>: Allow users to toggle dark mode with a keyboard shortcut. <strong>Ctrl + Alt + D<\/strong> works out of the box, and you can record any key combination you prefer instead.<\/p><\/li>\n<li><p><strong>Multiple Floating Switch Designs<\/strong>: Choose from 5 floating switch styles \u2014 16 in total with Pro \u2014 and pick the screen corner it sits in, with its own margin controls.<\/p><\/li>\n<li><p><strong>Switch Attention Effect<\/strong>: Enable an animation on the floating switch to draw visitor attention. Choose from multiple effect styles including Pulse to highlight the toggle without being intrusive.<\/p><\/li>\n<li><p><strong>Customizable Switch<\/strong>: Adjust the switch size, colors, icons, and styling to match the site\u2019s design.<\/p><\/li>\n<li><p><strong>Switch in Menu<\/strong>: Insert the dark mode toggle into selected WordPress navigation menus.<\/p><\/li>\n<li><p><strong>Shortcode Switch<\/strong>:  Place the dark mode toggle anywhere on the site using a shortcode, including pages, posts, widgets, or templates. Style it independently of the floating switch, or reuse the global settings.<\/p><\/li>\n<li><p><strong>Dark Mode Gutenberg Block<\/strong>: Instantly add a sleek dark mode toggle to any post or page using the Gutenberg block. Place it anywhere and give your visitors full control over their viewing experience.<\/p><\/li>\n<li><p><strong>Per-Block Switch Styling<\/strong>: Set the switch style, size, background, icon color, text color, border, corner radius, and alignment for each block directly inside the Gutenberg editor.<\/p><\/li>\n<li><p><strong>Dark Mode Elementor Widget<\/strong>: Seamlessly insert a customizable dark mode switch into any Elementor layout. Design it your way and match it perfectly with your site\u2019s style.<\/p><\/li>\n<li><p><strong>Dark Mode Widget Support<\/strong>: Easily enable dark mode for WordPress widgets and keep your entire site visually consistent\u2014no extra setup, no hassle.<\/p><\/li>\n<li><p><strong>Multiple Switch Placement Options<\/strong>: Display the dark mode toggle as a floating button, menu item, shortcode, or by targeting a custom CSS selector.<\/p><\/li>\n<li><p><strong>Mobile-Specific Controls<\/strong>: Control switch visibility, position, spacing, and behavior separately for mobile devices.<\/p><\/li>\n<li><p><strong>Color Presets &amp; Customization<\/strong>: Choose from 5 predefined dark color presets \u2014 11 in total with Pro \u2014 or manually configure background, text, link, and UI colors.<\/p><\/li>\n<li><p><strong>Dark Mode Scrollbar Styling<\/strong>: Optionally apply dark styling to browser scrollbars for a more consistent dark interface.<\/p><\/li>\n<li><p><strong>Advanced Image Control<\/strong>: Adjust image brightness, contrast, and grayscale settings to improve image visibility in dark mode.<\/p><\/li>\n<li><p><strong>Video Control<\/strong>: Modify video brightness and grayscale settings to better match dark mode layouts.<\/p><\/li>\n<li><p><strong>Element-Level Control<\/strong>: Include or exclude specific HTML elements, tags, classes, or IDs from dark mode styling.<\/p><\/li>\n<li><p><strong>Iframe Dark Mode<\/strong>: Keep embedded content in step with the active theme. Same-origin iframes are styled directly, and cross-origin embeds are notified of theme changes so they can follow along.<\/p><\/li>\n<li><p><strong>Live Preview<\/strong>: See your own site with your unsaved settings applied, right beside the settings \u2014 with desktop and mobile views, a refresh control, and a full screen mode.<\/p><\/li>\n<li><p><strong>Settings Search<\/strong>: Press Ctrl+K (Cmd+K on macOS) to jump straight to any setting from anywhere in the panel, without hunting through tabs.<\/p><\/li>\n<li><p><strong>Reset to Defaults<\/strong>: Restore a single section or every setting at once, each behind a confirmation step.<\/p><\/li>\n<li><p><strong>Settings Backup &amp; Restore<\/strong>: Export plugin settings to a file and import them on another site or restore them later.<\/p><\/li>\n<li><p><strong>Clean Uninstall Option<\/strong>: Optionally remove plugin settings and data from the database when uninstalling the plugin.<\/p><\/li>\n<li><p><strong>Page Builder Compatibility<\/strong>: Compatible with popular page builders such as Elementor, Divi, WPBakery, Beaver Builder, Visual Composer, and Oxygen.<\/p><\/li>\n<li><p><strong>Easy Settings Panel<\/strong>: Manage every feature from one modern, centralized settings panel in the WordPress admin area \u2014 organized into clear sections, usable on phones and tablets, with instant saves and clear success and error messages.<\/p><\/li>\n<li><p><strong>Multisite Support<\/strong>: Configure dark mode settings for WordPress multisite networks, globally or per site.<\/p><\/li>\n<li><p><strong>Multilingual Ready<\/strong>: Translation-ready and compatible with multilingual WordPress setups.<\/p><\/li>\n<li><p><strong>Theme Compatibility<\/strong>: Designed to work with most WordPress themes without requiring theme-specific modifications.<\/p><\/li>\n<li><p><strong>Developer-Friendly<\/strong>:  Provides a structured and extensible codebase that developers can customize using hooks and filters.<\/p><\/li>\n<li><p><strong>Cross-Browser Compatibility<\/strong>: Designed to work across modern browsers such as Chrome, Firefox, Safari, Edge, Opera, etc.<\/p><\/li>\n<li><p><strong>Documentation &amp; Support<\/strong>: User guides, tutorials, and support are available through documentation and the WordPress.org support forums.<\/p><\/li>\n<\/ul>\n\n<h3>Full Features &amp; Setup Guide<\/h3>\n\n<p>[youtube https:\/\/youtu.be\/H51pgFm52LY]<\/p>\n\n<h3>How to Add Dark Mode in Gutenberg (WordPress Block Editor)<\/h3>\n\n<p>[youtube https:\/\/youtu.be\/VbujMOaKp4o]<\/p>\n\n<h3>How to Add Dark Mode in Elementor<\/h3>\n\n<p>[youtube https:\/\/youtu.be\/7NAxigAQU6E]<\/p>\n\n<h4>Page Builder Compatibility<\/h4>\n\n<ul>\n<li>Gutenberg<\/li>\n<li>WPBakery<\/li>\n<li>Elementor<\/li>\n<li>Beaver Builder<\/li>\n<li>SiteOrigin<\/li>\n<li>Divi<\/li>\n<li>LayersWP<\/li>\n<li>MotoPress<\/li>\n<li>Cornerstone<\/li>\n<li>Themify Builder<\/li>\n<li>Spectra<\/li>\n<li>Visual Composer<\/li>\n<li>Brizy<\/li>\n<li>Oxygen Builder<\/li>\n<li>CoBlocks<\/li>\n<li>GreenShift<\/li>\n<li>Bricks Builder<\/li>\n<li>JetEngine (Crocoblock ecosystem)<\/li>\n<li>\u2026and more<\/li>\n<\/ul>\n\n<h4>Compatible Themes (examples)<\/h4>\n\n<ul>\n<li>Hello Elementor<\/li>\n<li>Astra<\/li>\n<li>Divi<\/li>\n<li>Kadence<\/li>\n<li>Themify Ultra<\/li>\n<li>OceanWP<\/li>\n<li>Hestia<\/li>\n<li>Inspiro<\/li>\n<li>GeneratePress<\/li>\n<li>Avada<\/li>\n<li>Blocksy<\/li>\n<li>Neve<\/li>\n<li>Betheme<\/li>\n<li>The7<\/li>\n<li>Flatsome<\/li>\n<li>BuddyBoss<\/li>\n<li>Spacious<\/li>\n<li>Responsive<\/li>\n<li>Customizr<\/li>\n<li>ColorMag<\/li>\n<li>Phlox<\/li>\n<li>Photograph<\/li>\n<li>Sydney<\/li>\n<li>Enfold<\/li>\n<li>Uncode<\/li>\n<li>Salient<\/li>\n<li>Jupiter X<\/li>\n<li>X Theme<\/li>\n<li>Newspaper<\/li>\n<li>Block Theme<\/li>\n<li>\u2026and more<\/li>\n<\/ul>\n\n<h4>\u2194 Slider Compatibility<\/h4>\n\n<p>Darkify is fully compatible with the most popular WordPress slider plugins:<\/p>\n\n<ul>\n<li>Slider Revolution<\/li>\n<li>Smart Slider 3<\/li>\n<li>LayerSlider<\/li>\n<li>MetaSlider<\/li>\n<li>Soliloquy<\/li>\n<li>Master Slider<\/li>\n<li>RoyalSlider<\/li>\n<li>Swiper (Theme-integrated sliders)<\/li>\n<li>Owl Carousel\u2013based sliders<\/li>\n<li>Slick Slider integrations<\/li>\n<li>Kadence Slider<\/li>\n<li>Elementor Slides Widget<\/li>\n<li>Divi Slider Module<\/li>\n<li>Avada Slider (Fusion Slider)<\/li>\n<li>Block Editor Slider Blocks<\/li>\n<li>Ultimate Addons Slider Modules<\/li>\n<li>\u2026and more<\/li>\n<\/ul>\n\n<h3>PRO VERSION FEATURES<\/h3>\n\n<p>\ud83c\udfa8 <strong>Design &amp; Customization Options<\/strong><\/p>\n\n<ul>\n<li><p><strong>16+ Floating Switch Designs<\/strong><br \/>\nChoose from a diverse collection of floating switch styles to perfectly match your website\u2019s look and feel.<\/p><\/li>\n<li><p><strong>Draggable Switch Positioning<\/strong><br \/>\nAllow users to move the floating dark mode switch anywhere on the screen. This drag-and-drop flexibility ensures convenient access from any page or section.<\/p><\/li>\n<li><p><strong>Special Color Preset Customization<\/strong><br \/>\nCustomize your dark mode theme with advanced color settings. Change link colors, border colors, form field styling, and button appearances to align with your brand identity.<\/p><\/li>\n<li><p><strong>Custom CSS for Dark Mode<\/strong><br \/>\nAdd custom CSS styles that apply <strong>only<\/strong> in dark mode. This gives developers and designers complete control for fine-tuning the dark theme experience.<\/p><\/li>\n<\/ul>\n\n<p>\ud83d\uddbc\ufe0f <strong>Media Handling<\/strong><\/p>\n\n<ul>\n<li><p><strong>Image Inversion<\/strong><br \/>\nAutomatically invert specific images for better visibility in dark mode. Improve both aesthetics and accessibility without needing to edit the original assets.<\/p><\/li>\n<li><p><strong>Image Replacement<\/strong><br \/>\nSeamlessly replace specific images with dark-mode-optimized versions. Perfect for logos, banners, or illustrations that need a customized look in night mode.<\/p><\/li>\n<li><p><strong>Video Replacement<\/strong><br \/>\nAutomatically swap videos with dark-friendly versions to maintain a consistent design across your website\u2019s visual elements.<\/p><\/li>\n<\/ul>\n\n<p>\ud83d\udd27 <strong>Advanced Visibility Controls<\/strong><\/p>\n\n<ul>\n<li><p><strong>Allow \/ Disallow Elements<\/strong><br \/>\nFine-tune your dark mode display by selecting which HTML elements or sections should use dark mode styling\u2014and which should not.<\/p><\/li>\n<li><p><strong>Allow \/ Disallow Pages<\/strong><br \/>\nChoose which individual pages display dark mode. Exclude landing pages, checkout flows, or any special content for a fully tailored user experience.<\/p><\/li>\n<li><p><strong>Allow \/ Disallow Posts<\/strong><br \/>\nDecide which specific posts support dark mode. Maintain full editorial control over how your content appears across different post types.<\/p><\/li>\n<\/ul>\n\n<h3>External services<\/h3>\n\n<p>Darkify uses the <a href=\"https:\/\/appsero.com\">Appsero<\/a> SDK to collect some telemetry data upon the user's confirmation. This helps us troubleshoot problems faster and make product improvements.<\/p>\n\n<p>Appsero SDK <strong>does not gather any data by default.<\/strong> The SDK only starts gathering basic telemetry data <strong>when a user allows it via the admin notice<\/strong>. We collect the data to ensure a great user experience for all our users.<\/p>\n\n<p>Integrating the Appsero SDK <strong>DOES NOT IMMEDIATELY<\/strong> start gathering data, <strong>without confirmation from users in any case.<\/strong><\/p>\n\n<p>If you decline the notice, the SDK sends one anonymous request recording that telemetry was declined \u2014 it contains a random site identifier only, and no data about you, your site or your visitors. Nothing further is sent, and the weekly telemetry schedule is never started.<\/p>\n\n<p>Learn more about how <a href=\"https:\/\/appsero.com\/privacy-policy\/\">Appsero collects and uses this data<\/a>.<\/p>\n\n<h3>Third-Party Libraries<\/h3>\n\n<p>Darkify bundles <strong>Dark Reader<\/strong> (https:\/\/github.com\/darkreader\/darkreader), which renders dark mode in the WordPress admin. It is licensed under the MIT License, which is compatible with this plugin's GPLv2-or-later license. The full copyright and permission notice is included at the top of both <code>src\/assets\/js\/vendor\/darkreader.js<\/code> and the minified build produced from it.<\/p>\n\n<p>Dark Reader runs entirely in the browser on the pages you are already viewing. It makes no network requests of its own and sends nothing anywhere \u2014 it is a bundled library, not an external service.<\/p>\n\n<h3>OTHER AMAZING PRODUCTS FROM ThemeAtelier<\/h3>\n\n<p>\u27a1\ufe0f <strong><a href=\"https:\/\/wordpress.org\/plugins\/chat-help\/\">ChatHelp - WhatsApp Chat Help Plugin<\/a><\/strong> -  A flexible WhatsApp chat plugin that helps website visitors start instant conversations with you directly from your WordPress site.<\/p>\n\n<p>\u27a1\ufe0f <strong><a href=\"https:\/\/wordpress.org\/plugins\/eventful\/\">Eventful \u2013 Events Showcase and Filter Bar for The Events Calendar<\/a><\/strong> -  An event display plugin for The Events Calendar that helps you showcase events in clean, modern, and fully responsive layouts without any coding.<\/p>\n\n<p>\u27a1\ufe0f <strong><a href=\"https:\/\/wordpress.org\/plugins\/greet-bubble\/\">Greet \u2013 Video Bubble Warm Welcome Plugin<\/a><\/strong> - A video welcome bubble plugin that helps you greet visitors warmly and provide quick contact options to boost engagement.<\/p>\n\n<p>\u27a1\ufe0f <strong><a href=\"https:\/\/wordpress.org\/plugins\/domain-for-sale\/\">Domain For Sale<\/a><\/strong> - A domain listing and offer management plugin that helps you list domains, collect buyer offers, and manage secure sales with escrow payments directly from WordPress.<\/p>\n\n<p>\u27a1\ufe0f <strong><a href=\"https:\/\/wordpress.org\/plugins\/eventful-for-elementor\/\">Eventful for Elementor \u2013 Events Showcase For The Events Calendar and Elementor<\/a><\/strong> -  An Elementor addon for The Events Calendar that lets you design and display events using Elementor widgets with advanced, responsive layouts.<\/p>\n\n<p>\u27a1\ufe0f <strong><a href=\"https:\/\/wordpress.org\/plugins\/better-chat-support\/\">Better Chat Support For Messenger<\/a><\/strong> -  A Facebook Messenger chat plugin that allows visitors to contact you instantly through Messenger with customizable chat bubbles.<\/p>\n\n<!--section=installation-->\n<h4>AUTOMATIC INSTALLATION (EASIEST WAY)<\/h4>\n\n<ul>\n<li>Visit <strong>Plugins &gt; Add New<\/strong>.<\/li>\n<li>Search for <strong>Darkify Dark Mode<\/strong>.<\/li>\n<li>Install and activate the Darkify plugin.<\/li>\n<\/ul>\n\n<h4>MANUAL INSTALLATION<\/h4>\n\n<p><strong>Uploading in WordPress Dashboard<\/strong><\/p>\n\n<ul>\n<li>Download darkify.zip<\/li>\n<li>Navigate to the \u2018Add New\u2019 in the plugins dashboard<\/li>\n<li>Navigate to the \u2018Upload\u2019 area<\/li>\n<li>Select darkify.zip from your computer<\/li>\n<li>Click \u2018Install Now\u2019<\/li>\n<li>Activate the plugin in the Plugin dashboard<\/li>\n<\/ul>\n\n<p><strong>Using FTP<\/strong><\/p>\n\n<ul>\n<li>Download darkify.zip<\/li>\n<li>Extract the darkify folder to your computer<\/li>\n<li>Upload the darkify folder to the \/wp-content\/plugins\/ directory<\/li>\n<li>Activate the plugin in the Plugin dashboard<\/li>\n<\/ul>\n\n<h4>After activation<\/h4>\n\n<ul>\n<li>Go 'Darkify' Menu from the left panel of admin<\/li>\n<li>Configure settings as you want.<\/li>\n<\/ul>\n\n<p><a href=\"https:\/\/darkifywp.com\/docs\/quick-start-guide\/\">For basic usage, have a look at Darkify quick start guide<\/a><\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"can%20i%20enable%20dark%20mode%20only%20for%20the%20wordpress%20admin%20dashboard%3F\"><h3>Can I enable Dark Mode only for the WordPress Admin Dashboard?<\/h3><\/dt>\n<dd><p>Yes! You can choose to enable Dark Mode specifically for the <strong>Admin Panel, Block Editor (Gutenberg)<\/strong>, and <strong>Classic Editor<\/strong> from the Admin settings, even if the frontend is disabled.<\/p><\/dd>\n<dt id=\"does%20darkify%20support%20automatic%20switching%20based%20on%20os%20settings%3F\"><h3>Does Darkify support automatic switching based on OS settings?<\/h3><\/dt>\n<dd><p>Absolutely. You can enable the <strong>OS Aware Dark Mode<\/strong> feature, which automatically detects if a user is using a dark or light theme on their device (macOS, Windows, iOS, or Android) and matches your site accordingly.<\/p><\/dd>\n<dt id=\"is%20it%20possible%20to%20schedule%20dark%20mode%20for%20specific%20hours%3F\"><h3>Is it possible to schedule Dark Mode for specific hours?<\/h3><\/dt>\n<dd><p>Yes, the plugin includes a <strong>Time Based Auto Dark Mode<\/strong> feature where you can pick a specific \"From\" and \"To\" time to automate the transition based on the user's local time.<\/p><\/dd>\n<dt id=\"can%20i%20customize%20the%20appearance%20of%20the%20dark%20mode%20switch%3F\"><h3>Can I customize the appearance of the dark mode switch?<\/h3><\/dt>\n<dd><p>Yes, Darkify offers a range of <strong>Switch Togglers<\/strong> (e.g., Orbit, Classic, Expand, Inner Moon, Within), with more available in Pro. You can also fully customize the switch background, size, icon color, and border.<\/p><\/dd>\n<dt id=\"does%20the%20plugin%20allow%20me%20to%20exclude%20certain%20pages%20or%20elements%3F\"><h3>Does the plugin allow me to exclude certain pages or elements?<\/h3><\/dt>\n<dd><p>Yes, the <strong>Advanced<\/strong> settings allow you to disallow Dark Mode on specific page slugs. You can also fine-tune the experience by allowing or disallowing specific HTML elements, tags, or CSS IDs.<\/p><\/dd>\n<dt id=\"will%20my%20images%20and%20videos%20look%20too%20bright%20in%20dark%20mode%3F\"><h3>Will my images and videos look too bright in Dark Mode?<\/h3><\/dt>\n<dd><p>Darkify includes <strong>Image and Video Controls<\/strong> that allow you to lower brightness, apply grayscale levels, or even replace specific media files with dark-mode-optimized versions to maintain a perfect aesthetic.<\/p><\/dd>\n<dt id=\"can%20i%20change%20the%20color%20scheme%20to%20match%20my%20brand%3F\"><h3>Can I change the color scheme to match my brand?<\/h3><\/dt>\n<dd><p>Definitely. You can choose from several <strong>Color Presets<\/strong> (like Midnight Reverie or Verdant Depths) or manually customize the background, text, link, and button colors.<\/p><\/dd>\n<dt id=\"does%20darkify%20clean%20up%20data%20when%20uninstalled%3F\"><h3>Does Darkify clean up data when uninstalled?<\/h3><\/dt>\n<dd><p>Yes, under the <strong>Extras<\/strong> tab, you have an option to clean up all plugin data and settings when the plugin is deleted, keeping your database clean and optimized.<\/p><\/dd>\n<dt id=\"does%20darkify%20work%20with%20elementor%20and%20other%20page%20builders%3F\"><h3>Does Darkify work with Elementor and other Page Builders?<\/h3><\/dt>\n<dd><p>Yes! Darkify is fully compatible with popular page builders like <strong>Elementor, Divi, WPBakery, Beaver Builder, and Oxygen<\/strong>. It automatically adapts to their structures for a seamless dark mode experience.<\/p><\/dd>\n<dt id=\"will%20darkify%20slow%20down%20my%20website%20loading%20speed%3F\"><h3>Will Darkify slow down my website loading speed?<\/h3><\/dt>\n<dd><p>Not at all. Darkify is built with a <strong>performance-first approach<\/strong>. It is extremely lightweight, uses optimized CSS\/JS, and works perfectly with caching plugins like <strong>WP Rocket, W3 Total Cache, and LiteSpeed Cache<\/strong>.<\/p><\/dd>\n<dt id=\"is%20this%20plugin%20compatible%20with%20woocommerce%3F\"><h3>Is this plugin compatible with WooCommerce?<\/h3><\/dt>\n<dd><p>Yes, Darkify is <strong>WooCommerce ready<\/strong>. It applies dark mode styling to WooCommerce pages such as product, cart, and checkout layouts.<\/p><\/dd>\n<dt id=\"do%20i%20need%20any%20coding%20knowledge%20to%20use%20this%20plugin%3F\"><h3>Do I need any coding knowledge to use this plugin?<\/h3><\/dt>\n<dd><p>No coding is required. You can manage everything\u2014from color presets to switch styles\u2014through our intuitive settings dashboard.<\/p><\/dd>\n<dt id=\"is%20darkify%20dark%20mode%20gdpr%20compliant%3F\"><h3>Is Darkify Dark Mode GDPR compliant?<\/h3><\/dt>\n<dd><p>Darkify does not collect personal data and stores user preferences locally in the browser.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.1.1 \u2013 26 August 2026<\/h4>\n\n<ul>\n<li>Fixed: Primary buttons, switches and selected states on Darkify's own settings screens ignored the Admin Panel Palette and stayed on a near-white default. Those parts are drawn from a <code>--primary<\/code> \/ <code>--primary-foreground<\/code> pair, and the pair had been left out of the palette map on the grounds that overwriting half of a contrast pair makes a button unreadable. Both halves are now taken from the palette's own button fill and button text \u2014 a pair its author already chose to be readable together \u2014 so a chosen palette finally reaches the last part of the screen it never did.<\/li>\n<li>Fixed: Switch tracks and thumbs rendered transparent under some palettes. A palette that did not carry a field was still writing that field's variable, as the literal text <code>undefined<\/code>, and a custom property that parses but never resolves takes its whole declaration down with it \u2014 so the track did not fall back to a default colour, it lost its background outright. A missing field now clears the variable instead of writing it, leaving the stylesheet's own value to stand.<\/li>\n<li>Fixed: Toggles were hard to see once they did have a colour, because the checked track took the palette's button fill \u2014 a colour chosen to sit on the page background, not to be read at a glance against a card, and measuring between 1.21 and 2.86 against each palette's card. The track now takes the palette's accent colour (4.29 to 14.50 across the same palettes) and the thumb takes the page background, so the moving part reads clearly against the part that does not.<\/li>\n<li>Fixed: Changing a colour preset in Live Preview only partly applied until the preview was reloaded. Rules written in terms of Darkify's variables follow a preset instantly, but the engine also writes colours inline as it walks the page \u2014 gradients, shadows, overlays, image brightness, icon colour \u2014 and an inline declaration has no variable in it to re-resolve. Worse, the gradient and shadow writers refuse to run twice by design, so a second pass changed nothing at all. Live Preview now clears those markers and re-runs the writers against the new colours, so a hero gradient follows the preset with everything else.<\/li>\n<\/ul>\n\n<h4>2.1.0 \u2013 25 August 2026<\/h4>\n\n<ul>\n<li>Changed: Dark mode in wp-admin is now rendered by Dark Reader instead of the per-element engine. The old engine walked every element on the screen, read its computed style, and re-walked on any DOM change \u2014 workable on a page that settles, and untenable in wp-admin, which never does. Dark Reader works a stylesheet at a time and generates an inverted sheet once, so the cost no longer scales with how busy the screen is. The front end is untouched and still uses the original engine.<\/li>\n<li>Fixed: The block editor became unresponsive with Admin Panel Dark Mode on, and stayed that way \u2014 typing, adding a block or opening the inserter could each trigger it. Every DOM change queued a fresh walk of the whole editor, each visited element forcing a style recalculation, and the editor changes the DOM continuously; the work never finished before more arrived. The new admin engine does no per-element work at all.<\/li>\n<li>Added: Admin Panel Palette and Block Editor Palette settings, chosen independently. Both default to Auto, which derives a colour for every colour on screen rather than pinning a background and a text colour \u2014 that derivation is what lets unfamiliar admin screens from other plugins come out right, and a preset gives it up. Presets remain available for anyone who wants a fixed look, and the block editor's toolbar picker still overrides both for that user.<\/li>\n<li>Fixed: The classic editor's dark mode button did nothing whenever the admin itself was light. Its state had been folded into the admin's, so a light admin ruled out a dark writing area \u2014 a combination people deliberately choose. The two are independent again, and the editor body now follows the chosen palette instead of a fixed grey.<\/li>\n<li>Fixed: Short admin screens were painted in two tones, with a horizontal seam roughly a screen-height down. WordPress colours <code>body<\/code> and leaves <code>html<\/code> unpainted, so the two were being darkened from different starting points and the join showed wherever the content was shorter than the window. Both now resolve to the same colour, measured rather than predicted, so it holds under every palette.<\/li>\n<li>Fixed: Darkify's own settings screens rendered card borders and toggle backgrounds in red. Those screens ship their own dark theme, so darkening them a second time layered two themes over each other \u2014 and the modern colour values they use could not be parsed by the darkening engine, leaving the unresolved ones to settle on the theme's error colour. Those screens are now left to the theme they already have.<\/li>\n<li>Fixed: The Darkify menu icon in the WordPress sidebar sat noticeably brighter than every other icon. WordPress renders a menu icon as a background image, which cannot take the menu's colour the way its own font icons do, so ours stayed flat white. It now takes its colour from the menu like everything around it, under any admin colour scheme.<\/li>\n<li>Fixed: Resizing the browser window could freeze the page outright. Whether the admin menu needs its own scrollbar is a measurement that its own answer changes, and with a single threshold a menu sitting near that boundary flipped between the two answers without ever settling \u2014 a resize drag holds it there. The test now needs clear evidence in each direction before it changes its mind.<\/li>\n<li>Changed: The block editor has one dark mode toggle instead of two. The admin bar carried a second one alongside the toolbar button, both doing the same thing. The toolbar button is the one that survives, because the admin bar is hidden in the editor's fullscreen mode \u2014 which is its default.<\/li>\n<li>Fixed: The Help screen collapsed awkwardly at narrower widths \u2014 review cards wrapping to a word per line, plugin titles crushed against their install button, a tab clipped mid-word behind the upgrade button. Each of those laid itself out from the browser window's width while sitting in a column that only ever had a fraction of it. They now measure the space they are actually given, which also means collapsing the WordPress menu reflows them correctly.<\/li>\n<li>Fixed: Several Help screen elements were unreadable in dark mode: video play buttons vanished into their own white circles, the Lite vs Pro table header became a bright white band, and hovering a plugin card drew a hard white outline. Each used a colour that inverts between light and dark against something that does not \u2014 imagery, or a full-width band.<\/li>\n<li>Added: Pro colour presets now appear in the palette pickers as locked, badged entries rather than being absent. They cannot be selected or saved, and the engine falls back to Auto if one is ever set.<\/li>\n<li>Fixed: The \"Upgrade To Pro!\" menu link replaced the current admin screen instead of opening in a new tab, losing whatever was being configured.<\/li>\n<\/ul>\n\n<h4>2.0.4 \u2013 18 August 2026<\/h4>\n\n<ul>\n<li>Fixed: Brand-coloured icons \u2014 star ratings, coloured logo marks \u2014 lost their colour and read as the same flat grey as body text. The icon recolouring introduced in 2.0.4 mapped every icon onto the page's text colour unconditionally, with no exception for a colour that was never meant to blend in; a five-star testimonial rating was the clearest case, gold turning grey. Icon colour now runs through the same hue-preserving ramp gradients already use, so a brand colour keeps its hue and only its depth shifts for a dark backdrop.<\/li>\n<li>Fixed: A background writer added in 2.0.4 for empty decorative overlay divs (Elementor's <code>.elementor-background-overlay<\/code> and similar) was also catching real, content-bearing elements that simply never picked up one of the class-based repaint's own classes \u2014 a countdown timer's number box, a page-builder button. Flattening a background with no matching foreground adjustment is how a white button with dark text, or a navy countdown box, ended up the same dark shade as its own text and effectively vanished. The writer now skips anything with real text content, which an empty overlay div never has.<\/li>\n<li>Fixed: A dark icon sitting on its own light background \u2014 a WordPress social icon link's circle, for instance \u2014 was being recoloured to the page's light text colour, because the contrast check only looked at the page's general dark backdrop, not what the icon is actually sitting on. That turned a perfectly readable dark icon on a light circle into a light icon on the same light circle: invisible. Icon colour is now judged against the real, current colour immediately behind it, and left untouched whenever it already reads clearly there.<\/li>\n<li>Added: Border Color and Hover Border Color controls for buttons, in every color preset. A button's border was the one color dark mode never touched, so an outline button kept its light-design brand edge \u2014 a bright ring around a dark fill \u2014 and no setting could reach it. Each preset now ships a border color that matches its button fill, so solid buttons look exactly as before and outline buttons finally follow the palette.<\/li>\n<li>Fixed: Card outlines drawn as a shadow ring (<code>0 0 0 1px<\/code>) disappeared in dark mode. A ring like that is a border written in the wrong property, and it was being painted black like a real shadow \u2014 black on near-black is nothing at all \u2014 so a card outlined this way lost its edge while the card beside it, outlined with a real border, kept one. Rings now take the palette's border color, and turning shadows off no longer deletes them.<\/li>\n<li>Fixed: Body text and headings came out tinted on themes whose text color is a tinted near-black \u2014 inks like #0A232A or #101828, which most modern themes use instead of pure black. Those read as highly saturated brand colors and were lifted to a light teal or blue, overriding the text color chosen in settings. Near-black and near-white text is now treated as ink, while genuinely saturated deep colors stay on the brand path.<\/li>\n<li>Fixed: Hover effects, dropdowns, sliders and reveal animations snapped to their end state instead of easing. Darkify pauses CSS transitions while it reads a page's real colors, and that pause was applied to the whole document \u2014 including elements the pass never looked at \u2014 on passes triggered by any class change anywhere on the page. The pause is now scoped to the element being read.<\/li>\n<li>Fixed: Live Preview hid the site header on many themes. The panel filters out cookie banners, chat widgets and popups so the preview shows the page itself, and headers named \"sticky-bar\", \"top bar\" and similar were caught by that filter \u2014 hiding the part of the page most worth previewing. Semantic headers, banner landmarks and header\/nav class names are now recognized and kept.<\/li>\n<\/ul>\n\n<h4>2.0.3 \u2013 11 August 2026<\/h4>\n\n<ul>\n<li>Fixed: Pages could freeze or crawl once dark mode was on, worse the larger the page. Every element was watched for class changes individually, and each watcher had to be re-registered across the whole document whenever anything changed \u2014 on a 2,929-element page that came to 1.23 million registrations during load and 6.31 million on a single toggle, growing with the square of the page size. One watcher now covers the document, registered once, and the cost no longer scales with the page.<\/li>\n<li>Improved: Pages that keep changing after load \u2014 infinite scroll, carousels, WooCommerce cart and fragment refreshes, page builders and anything React-rendered \u2014 no longer re-scan the entire document on every change. Only the newly inserted parts are examined, so a long page stays as responsive as a short one.<\/li>\n<li>Improved: Switching between light and dark now only revisits the elements Darkify actually styled, and reads each one's colours once instead of twice, so the toggle settles noticeably faster on large pages.<\/li>\n<li>Fixed: The dark mode toggle snapped between states instead of animating. Darkify pauses CSS transitions while it reads a page's real colours, and the switcher was being caught by that pause even though its colours are never read.<\/li>\n<li>Improved: Pausing transitions during a pass is now a single rule on the page root rather than an inline style written to and removed from every element, which removed one forced style recalculation per element from every pass.<\/li>\n<li>Changed: The screen no longer dims while a page loads in dark mode. The brightness baseline added in 2.0.2 covered the gap before the first pass, but on a slow page it read as a grey overlay sitting over the whole site until loading finished, and it returned on every navigation. The page background is painted dark from the first frame instead, and the safety timeout that clears it drops from 2s to 0.8s.<\/li>\n<li>Added: A developer diagnostics mode for support and debugging, off by default and invisible to visitors. Add <code>?darkify_debug=1<\/code> to any URL, then run <code>darkifyDebug.report()<\/code> in the browser console for pass counts, timings and the number of elements Darkify processed.<\/li>\n<\/ul>\n\n<p>For releases before 2.0.3, see the full changelog: https:\/\/plugins.svn.wordpress.org\/darkify\/trunk\/changelog.txt<\/p>","raw_excerpt":"Darkify Dark Mode adds dark mode and night mode to WordPress websites and admin dashboards using a fast, lightweight, customizable dark mode toggle.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/185260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=185260"}],"author":[{"embeddable":true,"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/themeatelier"}],"wp:attachment":[{"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=185260"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=185260"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=185260"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=185260"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=185260"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/frp.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=185260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}