Dusky Dark Mode – Dark Mode for Gutenberg and Elementor

Dusky Dark Mode is the way to enhance your website with an easy, eye-friendly dark mode that reduces eye strain and grabs traffic. It offers predefined presets to match your site’s aesthetic and allows real-time customization. With admin dashboard dark mode support you can enable dark mode on your Dashboard with just one click. Choose Dusky Dark Mode for a sophisticated, user-friendly solution that improves both functionality and aesthetics.

👁️ More Features | 👑 Upgrade Now | 📄 Docs | ▶️ Video Tutorial | 🎧 Support

Let’s take a look at the impressive features of Dusky Dark Mode:

✨ FREE FEATURES: ✨

📋 Menu Toggle – Easily add a dark mode toggle switch or dropdown to your WordPress menu. This lets visitors turn dark mode on or off without confusion.

💻 Frontend Dark Mode – Switch your website’s colors to a darker theme on the frontend. It improves readability, reduces eye strain, and makes browsing more comfortable, especially for users who spend long hours on your website.

🌙 Default Dark Mode – Show your website in dark mode by default. When new visitors land on your site, they’ll see the dark version immediately unless they choose otherwise.

🌓 Auto Match OS Mode – Automatically detects the visitor’s device setting (light or dark) and applies the correct theme. This ensures a smooth experience for users who prefer their system settings to control the website’s appearance.

👨🏼‍💻 Admin Dashboard Dark Mode – Give your admin panel a dark interface. Perfect for site owners and editors who work long hours in WordPress and want a consistent dark theme across the backend.

👥 Autosave User Mode – Dusky Dark Mode remembers the visitor’s choice. If they select dark mode once, the next time they return to your site, dark mode will load automatically.

✎ Classic and Block Editor Compatibility – Works seamlessly with both the Classic Editor and the Block (Gutenberg) Editor, ensuring a smooth content editing experience in dark mode.

⌨️ Keyboard Shortcut – Quickly toggle between light and dark mode with (Ctrl + Alt + D). A great accessibility feature for power users.

⌛ Time-Based Dark Mode – Schedule dark mode to activate and deactivate at specific times of the day. For example, you can enable dark mode at night and automatically switch back to light mode in the morning.

📶 Improve Performance – Performance Mode helps reduce script loading time and ensures dark mode works faster and smoothly across all pages.

💻 Separate Toggle for Frontend and Dashboard – Control dark mode for your site visitors and your own admin dashboard separately. Customize them independently to suit different needs.

🎨 Color Settings – Select from 10+ built-in color presets to change the overall dark mode style instantly.

🙅‍♂️ Exclude Elements – You can exclude certain parts of your site (like forms, widgets, or images) from dark mode. This gives you more control over what areas should stay in light mode.

🖼️ Image Settings – Adjust how images look in dark mode. Choose from low brightness, grayscale, or color inversion to keep them readable and stylish.

🎥 Video Settings – Just like images, control how videos are displayed in dark mode. This helps balance visuals without losing clarity.

✅ Auto Save, Import, Export, Reset – Automatically save changes you make in the settings. Import or export your dark mode settings easily, and reset everything back to default with a single click.

🚀 Pro Features

🔴 Dark Mode Live Edit – Customize dark mode in real-time. Instantly preview your changes as you adjust colors, switches, and styles.

🧮 10+ Color Presets – Unlock more color schemes for a stylish dark look.

✏️ Custom Colors – Choose your own background, text, link, and button colors to match your brand.

🔘 30+ Toggle Buttons – Get access to 40+ toggle styles to fit your site’s design.

🖼️ Image and Video Replacement – Replace light-mode images and videos with alternative versions in dark mode.

📚 Dark Mode Typography – Improve readability with different fonts and font sizes when dark mode is enabled.

🫳 Draggable Toggle Switch – Drag and place the dark mode switch anywhere on the screen. Works on both frontend and backend.

👥 User Role Based Dashboard Dark Mode – Enable dark mode only for certain WordPress roles (e.g., Admins, Editors, Authors).

📈 Usage Analytics – Track dark mode usage on your site. See how many users prefer dark mode and how often it’s toggled.

䷛ Analytics & Reporting – Get detailed email reports on dark mode usage. Customize how often reports are sent and what details are included.

Custom CSS – Add your own CSS to fully control the appearance of dark mode.

🔋 Compatibility

Dusky Dark Mode is tested with the popular WordPress themes and plugins. It works with Astra, Divi, Avada, GeneratePress, Gutenberg, Classic Editor, Elementor, Beaver Builder, and many other popular themes. It’s also fully compatible with WooCommerce, Easy Digital Downloads, Contact Form 7, Gravity Forms, Yoast SEO, and other widely used plugins.

If you find any conflicts with your theme or plugins, you can easily fix them using the built-in Custom CSS option or by contacting our support team.

📚DOCUMENTATION & SUPPORT

Documentation
Support
Video Tutorials
Website

3rd Party API

This plugin uses the ip-api.com API to detect the user’s location and enable time-based dark mode according to their local time.

Special Thanks

This plugin includes a modified version of a script from Dark Reader, an open-source browser extension licensed under the MIT license. We thank the Dark Reader team for their contribution to the open-source community. For more information about Dark Reader and its licensing terms, please visit https://github.com/darkreader/darkreader.

Contribute

Dusky Dark Mode is an open-source project. You can view the full sources (unminified JS) and contribute to the project on GitLab: https://gitlab.com/jakirul/dusky-dark-mode

🔥 WHAT’S NEXT 🔥

Consider checking out our other products:

📦 File Manager For Dropbox – File Manager for Dropbox lets you connect your cloud storage to your site so you can upload, embed, and share files without touching your server space.

📂 Integration Google Drive – Easily use any Google Drive files to WordPress with awesome gallery, slider carousel, file browser, and embed documents.

🛒 Essential Addons for WooCommerce – Packed with 14+ must-have features to supercharge your WooCommerce store.

♿ Accessiy – The Accessibility tool to make your website accessible for everyone.

1. Install and activate Dusky Dark Mode from Plugins > Add New in your WordPress dashboard.
2. By default, the plugin follows the visitor’s OS dark mode setting. You can enable/disable this from Settings > Dusky Dark Mode.
3. Add the dark mode switch using a Menu Toggle, Gutenberg Block, or Elementor Widget.

You can also follow our video tutorial:

1.0.16 (2025-24-09)

• Update: Full version review
• Update: Image replacement uploaded
• Update: Keyboard shortcut updated
• Fixed: Blinking issue fixed

1.0.15 (2025-02-05)

• Update: Improved plugin performance and optimization.

1.0.14 (2025-01-08)

• Fix: Resolved classic editor issue.

1.0.13 (2024-12-03)

• Fix: Improved compatibility with caching plugins.
• Update: Verified compatibility with the latest WordPress version.

1.0.12 (2024-12-09)

• Fix: Resolved an issue where the default dark mode was not functioning correctly when a caching plugin was active.
• Fix: Corrected issue with shortcode toggle rendering.
• Fix: Improved compatibility with cache plugins.
• Fix: Addressed initial dark mode toggle malfunction.
• New: Added support for device-specific dark mode settings.

1.0.11 (2024-19-08)

• Fix: Fix Frontend toggle issue for logout user.
• New: Add Toggle position ( left, right, and middle ).
• New: Add Toggle size ( small, medium, and large ).

1.0.10 (2024-06-08)

• Fix: Fix “Advanced Editor Tools” plugin issue.
• Fix: Fix classic editor dark mode issue.

1.0.9 (2024-18-07)

• Fix: Fix background image replacement with classic and Gutenberg editor support.
• Fix: Fix Exclude elements/sections
• Fix: Fix flexible toggle issue
• Update: Optimize dashboard UI

1.0.8 (2024-04-07)

• Update: Enhance file size and overall performance.

1.0.7 (2024-02-07)

• New: Capable of adding both toggle and dropdown type switchers to the WordPress menu.
• Fix: Fix Missing Moon icon.

1.0.6 (2024-30-06)

• Fix: Fix Custom Default Toggle Size.
• Fix: Fix Keyboard Shortcut on MacOS.
• Fix: Fix Blinking Issue.
• Fix: Fix Time Based Dark Mode Issue.
• Update: Optimize overall performance.

1.0.5 (2024-20-05)

• Fix: Fix JS error dark mode issue.
• New: Supported .gif file in image replacement.
• Update: Update plugin UI.
• Update: Update Getting Started Page UI.
• Update: Improved overall plugin performance.

1.0.4 (2024-08-02)

• Fix: Fix some issues.
• New: Add total 40+ toggle button.
• Update: Optimize files size.

1.0.3 (2024-29-01)

• Fix: Fix 500 errors in ajax.

1.0.2 (2024-15-01)

• New: Added auto save settings.
• New: Added 14+ new dark mode color presets.
• New: Added 15+ new dark mode toggler.
• New: Added dark mode Live Editor.
• New: Added dark mode usage analytics.
• New: Added images and videos settings.
• New: Added user role based dark mode.
• New: Added URL parameter.
• New: Added color adjustments settings.
• New: Added flexible toggle position.
• New: Added frontend and backend toggler position settings.
• Update: Improved overall plugin performance.
• Update: Improved toggle switcher.

1.0.1 (2024-11-01)

• Fix: Fix JS error dark mode issue.
• Update: Reduced the javascript file size.

1.0.0 (2024-18-01)

• Initial release.