Identity
| Field | Value |
|---|
| Plugin directory | id86-darkmode |
| Plugin name | ID86 Dark Mode |
| Version | 0.1.4 |
| Author | id86 |
| Production path | /home/Dmg59ZFtKg6bIws1/id86net/public_html/wp-content/plugins/id86-darkmode |
| Local checkout | /home/rezriz/github/Wordpress/wp-dev/plugins/develop-internally/id86-darkmode |
What It Does
- Shows an icon-only toggle in the GeneratePress header menu bar on every front-end page.
- Enables Dark Reader with an ID86 brand palette so navy/blue tokens stay on-theme in dark mode.
- Applies to posts, pages, archives, category pages, search, and the homepage.
- Dark mode is enabled by default on first visit.
- The visitor's choice persists in
localStorage (id86-dark-mode-enabled).
Plugin Structure
| File | Responsibility |
|---|
id86-darkmode.php | Plugin bootstrap, asset enqueuing, and toggle output on generate_menu_bar_items (priority 60) |
assets/js/darkreader.min.js | Bundled Dark Reader library |
assets/js/dark-mode.js | Toggle behavior, saved state, and ID86 brand Dark Reader config |
assets/css/dark-mode.css | Toggle button styling |
Behavior
- The desktop toggle renders in
#site-navigation (generate_menu_bar_items, priority 60).
- On tablet/mobile (≤ 1024px) the same toggle renders in the top bar's
#mobile-menu-control-wrapper, next to the search trigger and the hamburger. The duplicate slideout control was removed.
- Desktop and mobile copies share state through the existing
setButtonState() synchronization and do not depend on JavaScript DOM relocation when the viewport is resized.
- First visit: dark mode turns on immediately, so the toggle is shown in its active state.
- One click toggles dark mode on or off; the choice persists across future visits in the same browser.
- A JavaScript fallback injects a fixed top-right toggle if no header toggle is visibly rendered (e.g. cached HTML without the server-rendered button).
Brand Overrides
The Dark Reader config remaps ID86 brand tokens so brand components stay consistent in dark mode:
--id86-navy, --id86-blue, --id86-sky, --id86-ink, --id86-mist are remapped to lighter dark-mode-safe values.- Hero and archive-hero gradients, niche/sheet/archive cards, category chips, archive text colors, and the site header border receive explicit dark-mode colors.
- The header logo is inverted (
filter: brightness(0) invert(1)) when html.id86-dark-mode is active.
Deployment & Cache
- Scope is front end only; the WordPress admin dashboard is untouched.
- The plugin is bundled and deployed with the rest of the site via rsync to
GC-US-M10.
- After changing CSS/JS, touch the asset file so
filemtime() produces a fresh ?ver= URL, then clear LiteSpeed, PHP OPcache, and Cloudflare caches in order.
- If a change is not visible after a deploy, the stale copy is usually a Cloudflare edge cache of the affected page — purge the zone cache via the Cloudflare API.
Responsive Navigation Deployment
- Plugin version
0.1.4 was deployed to GC-US-M10 at /home/Dmg59ZFtKg6bIws1/id86net/public_html/wp-content/plugins/id86-darkmode.
- The
slideout menu location is assigned to the existing Main Menu using WP-CLI.
- LiteSpeed cache, PHP OPcache, and the Cloudflare zone cache were purged after deployment.
- Origin markup was verified with
curl --resolve; it contains Recommendations, GitHub, and the Dark mode control inside the top bar's #mobile-menu-control-wrapper.
Reference
- The behavior mirrors the proven
wpstrategist-dark-mode plugin on wpwhite.com (GC-SG-M8), including the default-on reading mode.
- Deactivating the plugin removes all dark-mode behavior cleanly.