Mustafa Uysal

Stanislav Khromov

<p><strong>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.</strong></p>
<p>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.</p>
<p><strong>New in 3.0</strong></p>
<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>
<p>Translations:</p>
<ul>
<li>Turkish</li>
</ul>
<p>Thanks to <a href="https://profiles.wordpress.org/m_uysl" rel="nofollow ugc">m_uysl</a> for these additions.</p>
<p><strong>New in 2.1</strong><br />
Introducing Autolycus and ZenHub themes – check out the screenshots in the Screenshots tab!</p>
<p><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></p>
<p><strong>Usage</strong></p>
<p>Enter the Distraction Free writing Mode in WordPress by clicking the DFWM button in the editor. (Shortcut Alt+Shift+W)</p>
<p><a href="http://en.support.wordpress.com/distraction-free-writing/" rel="nofollow ugc">Read mode about the Distraction Free writing Mode</a></p>
<h3>Requirements</h3>
<ul>
<li>PHP 5.3 or higher strongly recommended</li>
</ul>
<h3>Translations</h3>
<p>None at the moment. Translations welcome.</p>
<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.

PlugPress

Fahim Reza

<p><strong>Transform your WordPress site with a sleek dark mode toggle that your visitors will love.</strong></p>
<p>Nightly is a lightweight, professional dark mode plugin that seamlessly integrates with any WordPress theme. Whether you’re using modern FSE (Full Site Editing) themes or classic themes, Nightly provides the perfect dark mode solution for your website.</p>
<h4>Why Choose Nightly?</h4>
<ul>
<li><strong>Universal Compatibility</strong> – Works with FSE themes, classic themes, and everything in between</li>
<li><strong>Smart Theme Detection</strong> – Automatically adapts the interface based on your theme type</li>
<li><strong>Multiple Implementation Options</strong> – Gutenberg block, floating toggle, or manual integration</li>
<li><strong>Accessibility First</strong> – WCAG 2.1 AA compliant with full keyboard navigation and screen reader support</li>
<li><strong>Performance Optimized</strong> – Lightweight code that won’t slow down your site</li>
<li><strong>User Preference Respect</strong> – Automatically detects and honors system dark mode preferences</li>
<li><strong>Smooth Transitions</strong> – Customizable animation speeds for seamless theme switching</li>
</ul>
<h4>Key Features</h4>
<ul>
<li>System preference detection (respects prefers-color-scheme)</li>
<li>Customizable transition animations (0-1000ms)</li>
<li>Multiple floating toggle positions (all four corners)</li>
<li>localStorage persistence for user preferences</li>
<li>Synchronized toggles (multiple toggles stay in sync)</li>
<li>Mobile-responsive design</li>
<li>RTL language support</li>
</ul>
<h4>Easy to Use</h4>
<p><strong>Getting Started is Simple:</strong></p>
<ol>
<li><strong>Install & Activate</strong> – One-click installation from WordPress.org</li>
<li><strong>Choose Your Method</strong> – Use the Gutenberg block or enable the floating toggle</li>
<li><strong>Customize Settings</strong> – Configure position, animation speed, and preferences</li>
<li><strong>Done!</strong> – Your visitors can now enjoy dark mode</li>
</ol>
<p><strong>No coding required. No theme modifications needed. Just install and go.</strong></p>
<h4>🛠️ Developer Friendly</h4>
<ul>
<li>Clean, well-documented code following WordPress standards</li>
<li>CSS custom properties for easy theme integration</li>
<li>JavaScript events for advanced customization</li>
<li>Hooks and filters for extensibility</li>
<li>Modern build process with optimized assets</li>
</ul>
<h4>🌐 Accessibility & Performance</h4>
<ul>
<li><strong>WCAG 2.1 AA Compliant</strong> – Full accessibility support</li>
<li><strong>Keyboard Navigation</strong> – Tab, Enter, and Space key support</li>
<li><strong>Screen Reader Compatible</strong> – Proper ARIA attributes and announcements</li>
<li><strong>High Contrast Support</strong> – Works with Windows high contrast mode</li>
<li><strong>Lightweight</strong> – Minimal impact on page load times</li>
<li><strong>Conditional Loading</strong> – Assets only load when needed</li>
</ul>
<h3>Support</h3>
<p>Need help? We’re here for you!</p>
<ul>
<li><strong>Documentation</strong>: Comprehensive guides and examples</li>
<li><strong>Support Forum</strong>: Community support and troubleshooting</li>
<li><strong>Developer Resources</strong>: Hooks, filters, and customization guides</li>
</ul>
<p>Visit <a href="https://plugpress.io/" rel="nofollow ugc">plugpress.io</a> for additional resources and premium support options.</p>
<h3>Privacy</h3>
<p>Nightly respects user privacy:</p>
<ul>
<li>No data is sent to external servers</li>
<li>User preferences are stored locally in the browser</li>
<li>No tracking or analytics</li>
<li>GDPR compliant</li>
<li>No cookies used</li>
</ul>
<p>Your users’ privacy is protected while they enjoy the dark mode experience.</p>


Nightly — Dark Mode Toggle

Add a professional dark mode toggle to your WordPress site. Works with any theme - FSE or classic. Lightweight, accessible, and user-friendly.

Distraction Free Writing mode Themes vs Nightly — Dark Mode Toggle