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.

Mahbub Hasan Imon

Golam Mostafa

Rony Mia

Sayemur Rahman

Kazi Sayed

AbdurRahamanWP

DroitThemes

<a href="https://droitthemes.com/droit-dark-mode/" rel="nofollow ugc">Droit Dark Mode</a> Plugin is a great way to create a stunning dark version of your website and dashboard – easily and effectively. This WordPress Plugin allows you to turn enable/disable the dark mode option from the dashboard with tons of settings. It enables you to turn on/off dark mode in your website without lots of efforts, hassle or coding.
This WordPress dark mode plugin is very much user friendly, fully compatible to all browsers, operating systems and devices.
👁️ <a href="https://demos.droitthemes.com/droit-dark-mode/" rel="nofollow ugc">View Demo</a> | 👑 <a href="https://droitthemes.com/droit-dark-mode/" rel="nofollow ugc">Get The PRO Version</a> | 👍 <a href="https://droitthemes.ticksy.com/" rel="nofollow ugc">Get Support</a>
<h3>Droit Dark Mode Free Features</h3>
<ol>
<li>Multiple Switch Styles – Comes with multiple switch styles that you can choose from and use on your website</li>
<li>Floating Switch Button – Floating switch button can be shown anywhere in the body of your website.</li>
<li>Set Default Mode – You can set the dark mode in your website as the default (first time) view.</li>
<li>Switch Elementor Widget – Switch Button can be placed on the content of any post/page by using the Elementor widget.</li>
<li>Switch Gutenberg Block – Switch Button can be placed on the content of any post/page by using the Gutenberg block.</li>
<li>Dashboard Dark Mode – Your WordPress admin panel/dashboard can also be made dark.</li>
<li>Multiple Color Presets – 10+ exclusive color presets are available to quickly change the dark mode color from the color palette.</li>
<li>Dark Mode Saved – Your choice of dark/light mode is saved by default once you set which mode to turn on.</li>
<li>Theme Compatibility – Dark Mode plugin is compatible with all major themes out in the market, so you are well covered!</li>
<li>Set Dashboard Color Preset – You can set color preset for dark and light admin dashboard based on your browser.</li>
<li>Body Position Options – Set switch at different positions in your websites (left-top, left-bottom, right-top. right-bottom, center-bottom, center-top and so on).</li>
</ol>
<h3>👑 Droit Dark Mode Pro Features</h3>
<ol>
<li>All features of free version</li>
<li>Image Brightness – Increase/decrease brightness of images in your website.</li>
<li>Image Opacity – Increase/decrease opacity of images in your websites.</li>
<li>Image Contrast – Increase/decrease contrast of images in your website.</li>
<li>Specific Page – You can enable/disable dark or night mode and set different color palette on individual pages.</li>
<li>Specific Post – You can enable/disable dark mode and set different color palette on individual posts.</li>
<li>Specific Category – You can enable/disable dark mode and set different color palette on individual categories.</li>
<li>Specific WooCommerce Products – You can enable/disable dark mode and set different color palette on individual products.</li>
<li>Specific Content – Display the dark mode switch button before/after content for any kind of page/post type.</li>
<li>Set Timer For Dark Mode – Dark mode will be turned on or off based on the time you set.</li>
<li>Dark Mode Using Shortcode – Use [drdt_dark_mode] shortcode to display the dark mode switch button on anywhere of your websites.</li>
<li>Dark Mode Switch Widget – Using the Droit Dark Mode Widget you can place the dark mode switch button.</li>
<li>Different Images For Dark Mode – You can set different images for dark mode and light mode separately.</li>
<li>Add Button To Primary Menu – You can add Dark Mode switch button into the primary menu.</li>
<li>Exclude Specific Elements – Using the CSS selectors you can exclude specific elements that are affected by the dark mode.</li>
<li>Include Specific Elements – Similarly, using the CSS selectors you can include specific elements that are affected by the dark mode.</li>
<li>Custom Color – You can set custom color for all headings, paragraphs, links, buttons and other UI elements.</li>
<li>Custom Switch Text – You can customize the dark/light text of the Dark Mode switch.</li>
<li>OS-based Dark Mode – Get dark mode instantly, Droit Dark Mode automatically detects the dark mode enabled on your OS and switches it on your website automatically.</li>
</ol>

Droit Dark Mode

Droit Dark Mode Plugin is a great way to create a stunning dark version of your website and dashboard - easily and effectively.

Distraction Free Writing mode Themes vs Droit Dark Mode