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.

yoren

jtzl

JTZL’s Dark Mode automatically applies dark mode styling to your WordPress site based on your visitors’ operating system preferences. No configuration required – it just works.
Interactive demo: 
https://playground.wordpress.net/?blueprint-url=https://wordpress.org/plugins/wp-json/plugins/v1/plugin/jtzls-dark-mode/blueprint.json
Key Features:
<ul>
<li>Automatic detection using CSS <code>prefers-color-scheme: dark</code> media query</li>
<li>Zero configuration – works out of the box</li>
<li>Privacy-respecting – all detection happens client-side</li>
<li>Theme-agnostic – works with any WordPress theme</li>
<li>Media preservation – images, videos, and embeds display correctly</li>
<li>Developer-friendly – extensible via WordPress filter hooks</li>
</ul>
How It Works:
The plugin uses the CSS <code>prefers-color-scheme</code> media query to detect when a visitor’s operating system is set to dark mode. When detected, dark mode styles are automatically applied without any JavaScript or server-side processing.
Technical Features:
<ul>
<li>Modern PHP 8.2+ architecture with dependency injection (PHP-DI)</li>
<li>Service-oriented design with PSR-4 autoloading</li>
<li>Separate styling strategies for Block themes (CSS variables) and Classic themes (filter inversion)</li>
<li>Comprehensive test coverage with PHPUnit</li>
</ul>
Developer Hooks:
Customize the plugin behavior using these filter hooks:
<ul>
<li><code>jtzl_dark_mode_enabled</code> – Enable/disable dark mode on specific pages</li>
<li><code>jtzl_dark_mode_css_variables</code> – Customize dark mode colors</li>
<li><code>jtzl_dark_mode_custom_css</code> – Add custom CSS rules</li>
</ul>

JTZL's Dark Mode

Automatic dark mode styling based on visitor OS preference using CSS prefers-color-scheme media query.

Distraction Free Writing mode Themes vs JTZL's Dark Mode