Dark Mode

Full dark/light theme toggle for visitors.

Dark Mode Toggle

WPDocs Premium includes a complete dark theme that transforms every element of the documentation site.

How It Works

  1. A sun/moon button appears in the top-right navbar
  2. Clicking adds the dark class to <html>
  3. Tailwind’s dark: CSS variants activate throughout the page
  4. Preference persists in localStorage across visits

System Preference Detection

On first visit with no stored preference, WPDocs checks the OS setting via prefers-color-scheme: dark. After manual toggle, the user’s explicit choice takes priority forever.

What Changes

Element Light Dark
Page background White Slate 950 (#020617)
Text color Slate 900 Slate 200
Sidebar White + light border Slate 950 + dark border
Navbar White/95 + blur Slate 950/95 + blur
Code blocks Slate 900 background Slate 800 background
Links Blue 500 Blue 400
Active sidebar Blue bg/10 Blue bg/10

Technical Implementation

Tailwind v4 uses media-based dark mode by default. WPDocs overrides this to class-based:

/* In app.css */
@variant dark (&:where(.dark, .dark *));

This tells Tailwind that dark: classes should activate when any ancestor has the .dark class.