Appearance Settings

Colors, dark mode, and visual customization.

Appearance Tab

Control the look and feel of your documentation site.

Primary Color (Premium)

Pick any color using the WordPress color picker. This single color drives the entire accent palette:

  • Active sidebar link background and text
  • Content link colors
  • Button backgrounds
  • TOC active indicator border
  • Search input focus ring
  • Section badge text

The color is output as CSS variable --wpdocs-primary, so all elements update at once.

Dark / Light Mode (Premium)

Enables the theme toggle button in the navbar. Technical details:

  • Toggle adds/removes the dark CSS class on <html>
  • Tailwind dark: variants handle all color switching
  • Preference saved in localStorage key wpdocs-theme
  • First visit respects OS preference via prefers-color-scheme

Free Version

In free mode, primary color is fixed at #3B82F6 (blue) and the dark mode toggle is hidden. The settings fields appear but are locked with an “Upgrade to Premium” button.

CSS Variables Reference

:root {
    --wpdocs-primary: #3B82F6;
    --wpdocs-primary-hover: #2563EB;
    --wpdocs-sidebar-width: 220px;
    --wpdocs-toc-width: 240px;
}