WPW Dark Mode

Overview

Version 0.1.3 by wpwhite.com. Adds a Dark Reader toggle button to the GeneratePress menu bar on single posts and pages. Uses the Dark Reader library (darkreader.min.js) for dynamic dark mode transformation.

Features

• Toggle button in the GeneratePress menu bar (sun/moon icons)
• Persists preference in localStorage
• Dark Reader library handles CSS inversion and color scheme adjustment
• Smooth transition between light and dark modes

Toggle Button

Rendered via generate_menu_bar_items hook at priority 60. The button has:

Attribute	Value
Class	wpstrategist-dark-mode-toggle
Role	button
aria-label	"Enable reading mode" / "Disable reading mode"
aria-pressed	false / true

Two SVG icons toggle visibility based on state:

• Sun icon: Visible when dark mode is off (default state)
• Moon icon: Visible when dark mode is active

Assets

File	Purpose
assets/js/darkreader.min.js	Dark Reader library (vendored)
assets/js/dark-mode.js	Toggle logic, localStorage persistence
assets/css/dark-mode.css	Toggle button styles

JavaScript Behavior

// Dark Reader API usage
DarkReader.enable({ brightness: 100, contrast: 90, sepia: 10 });
DarkReader.disable();

// Persistence
localStorage.getItem('wpstrategist-dark-mode');
localStorage.setItem('wpstrategist-dark-mode', 'enabled');

Conditional Loading

Assets only enqueue when:

• Not admin
• Is a single post or page (is_singular(array('post', 'page')))