Mustafa Uysal

Stanislav Khromov

This plugin is only compatible up to WordPress 3.8. Later versions revamped the distraction free writing mode and are not compatible with this plugin.
Dark and light themes for WordPress Distraction Free Writing mode editor. Use one of the built-in themes based on classics such as Monokai or Q10, or write your own using CSS.
New in 3.0
<ul>
<li>Option to auto-start distraction free writing mode when editing posts</li>
<li>Per-user distraction free theme settings</li>
<li>Internationalization support</li>
<li>Auto-start distraction free mode based on user roles</li>
</ul>
Translations:
<ul>
<li>Turkish</li>
</ul>
Thanks to <a href="https://profiles.wordpress.org/m_uysl" rel="nofollow ugc">m_uysl</a> for these additions.
New in 2.1 
Introducing Autolycus and ZenHub themes – check out the screenshots in the Screenshots tab!
<a href="http://khromov.wordpress.com/2013/03/19/new-themes-for-wordpress-distraction-free-writing-mode" title="Read the announcement!" rel="nofollow ugc">Read the full announcement!</a>
Usage
Enter the Distraction Free writing Mode in WordPress by clicking the DFWM button in the editor. (Shortcut Alt+Shift+W)
<a href="http://en.support.wordpress.com/distraction-free-writing/" rel="nofollow ugc">Read mode about the Distraction Free writing Mode</a>
<h3>Requirements</h3>
<ul>
<li>PHP 5.3 or higher strongly recommended</li>
</ul>
<h3>Translations</h3>
None at the moment. Translations welcome.
<h3>TODO</h3>
<ul>
<li>More themes! (If you’ve made a theme, make sure to submit it through the WordPress Support forum!)</li>
<li>Better instructions for making custom themes.</li>
<li>Theming the top bar. (Not done due to complexity in current themes, but future themes can technically do this.)</li>
</ul>

Distraction Free Writing mode Themes

Provides dark and light themes for for Distraction Free Writing mode. Use one of the beautiful built-in themes or write your own.

Freemius

Md Jakirul Islam

CodeConfig

wpwebdevs

<a href="https://codeconfig.dev/dusky-dark-mode/" rel="nofollow ugc">Dusky Dark Mode is the way to enhance your website</a> 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.
<a href="https://codeconfig.dev/dusky-dark-mode/" rel="nofollow ugc">👁️ More Features</a> | <a href="https://codeconfig.dev/dusky-dark-mode/dusky-pricing/" rel="nofollow ugc">👑 Upgrade Now</a> | <a href="https://codeconfig.dev/docs-category/dusky-dark-mode/" rel="nofollow ugc">📄 Docs</a> | <a href="https://youtube.com/playlist?list=PLNYVH9xXmhE0fKneRN9ZVkVR06yLV05km&si=psPswzS6iY0ts-GP" rel="nofollow ugc">▶️ Video Tutorial</a> | <a href="https://codeconfig.dev/contact/" rel="nofollow ugc">🎧 Support</a>
<iframe loading="lazy" title="How to Install and Activate Dusky Dark Mode for WordPress | The Best Dark Mode Plugin For WordPress" width="750" height="563" src="https://www.youtube.com/embed/EZq4djWwIV8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<h3>Let’s take a look at the impressive features of Dusky Dark Mode:</h3>
<h3>✨ FREE FEATURES: ✨</h3>
📋 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 <code>(Ctrl + Alt + D)</code>. 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.
<h3>🚀 Pro Features</h3>
🔴 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.
<h3>🔋 Compatibility</h3>
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.
<h3>📚DOCUMENTATION & SUPPORT</h3>
<a href="https://codeconfig.dev/docs-category/dusky-dark-mode/" rel="nofollow ugc">Documentation</a> 
<a href="https://codeconfig.dev/contact/" rel="nofollow ugc">Support</a> 
<a href="https://www.youtube.com/playlist?list=PLNYVH9xXmhE0fKneRN9ZVkVR06yLV05km" rel="nofollow ugc">Video Tutorials</a> 
<a href="https://codeconfig.dev/dusky-dark-mode" rel="nofollow ugc">Website</a>
<h3>3rd Party API</h3>
This plugin uses the <a href="http://ip-api.com" rel="nofollow ugc">ip-api.com</a> API to detect the user’s location and enable time-based dark mode according to their local time.
<h3>Special Thanks</h3>
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.
<h3>Contribute</h3>
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
<h3>🔥 WHAT’S NEXT 🔥</h3>
Consider checking out our other products:
📦 <a href="https://wordpress.org/plugins/integrate-dropbox/" rel="ugc">File Manager For Dropbox</a> – 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.
📂 <a href="https://wordpress.org/plugins/integration-google-drive/" rel="ugc">Integration Google Drive</a> – Easily use any Google Drive files to WordPress with awesome gallery, slider carousel, file browser, and embed documents.
🛒 <a href="https://wordpress.org/plugins/essential-addons-for-woocommerce" rel="ugc">Essential Addons for WooCommerce</a> – Packed with 14+ must-have features to supercharge your WooCommerce store.
♿ <a href="https://wordpress.org/plugins/codeconfig-accessibility/" rel="ugc">Accessiy</a> – The Accessibility tool to make your website accessible for everyone.

Dusky Dark Mode – Dark Mode for Gutenberg and Elementor


Dusky Dark Mode is the best WordPress dark mode plugin, recommended for use on your website to reduce eye strain and ensure prolonged user engagement.


Best WP Dark Mode plugin

Enable Dark Mode on your website & get an awesome user experience with advanced features.

Distraction Free Writing mode Themes vs Dusky Dark Mode – Dark Mode for Gutenberg and Elementor