Dark mode is now expected. Browsers communicate user preference via prefers-color-scheme, and most modern sites either follow it silently or expose a toggle. Legal Pro gives you all three options — automatic, manual, or system-with-toggle — and pairs it with dual-logo support so your branding stays legible across both modes.
Three behaviour modes
Go to Appearance → Customize → Legal Pro → Light & Dark Mode. The Behavior setting offers three options:
Auto (follow system, no toggle)
The site silently mirrors the visitor’s OS preference. No toggle button. No persistence — it just follows the system.
Use this when:
- Your audience is technical enough to understand OS-level dark mode
- You don’t want to add a UI element to the header
- You want zero friction for visitors who’ve already chosen dark at the OS level
Manual (toggle, default light)
A toggle appears in the header (or floating, depending on position setting). The site defaults to light. The visitor’s choice is saved in localStorage as lg_color_mode and persists across sessions.
Use this when:
- Your audience may not have a system-level preference
- You want every visitor to see the editorial light theme on first arrival (the brand-defining first impression)
System with toggle (recommended)
The toggle appears in the header. Initial state follows the OS preference. If the visitor explicitly toggles, that choice persists thereafter — overriding the OS preference for this site only.
This is the default and the recommended setting. It respects the visitor’s OS preference but gives them site-level control.
Toggle position
For Manual and System modes, you can place the toggle in two places:
- Header (next to CTA) — small circular button to the left of the “Schedule a consultation” CTA
- Floating (bottom right) — fixed position, always visible. Useful for content-heavy sites where the toggle should stay accessible while reading
How no-flash works
Dark mode visitors are particularly sensitive to “flash of light content” — that 100ms flicker where the page renders in light mode before the script applies dark. Legal Pro avoids this by injecting a tiny script in <head> at priority 1 — before any stylesheet loads. This script:
- Reads the saved preference from
localStorage - Reads the OS preference from
matchMedia - Decides the initial state and applies
data-color-mode="dark"to<html>immediately
By the time the first stylesheet renders, the dark variables are already in scope. No flash.
Reduced motion and accessibility
The dark mode system respects prefers-reduced-motion for the toggle’s transition animations, and the toggle button itself is keyboard-accessible (focus ring on focus, activates on Enter or Space).
Color contrast in both modes meets WCAG AA for body text and AAA for headlines — verified during development against the actual rendered tokens, not just the variable definitions.
Dual-logo support
If you upload a single logo via WordPress’s standard Site Identity → Logo setting, that logo appears on both light and dark backgrounds. For most logos this is fine — a black or oxblood SVG mark reads on both.
For some brands, though, the logo needs an alternate version on dark canvas — a light-on-dark variant. This is what Dual-Logo handles.
Setting up dual logos
- Upload your light-mode logo (the one that goes on bone canvas) under Customize → Site Identity → Logo.
- Upload your dark-mode logo under Customize → Legal Pro → Dual Logo (Light/Dark) → Dark-Background Logo.
- Optional: set Max Logo Width to constrain both logos to the same display size (default: 160px).
The dark logo is automatically used in:
- The header when dark mode is active
- The footer (always dark canvas)
- Any section with the class
lg-section-dark
Logo file recommendations
For best results across modes:
- Use SVG when possible — sharp at any size, no resolution issues
- If you must use raster, PNG with transparent background at 2x intended display size (e.g., 320px wide for a 160px display)
- Light-mode logo: dark mark (oxblood, black, or charcoal) on transparent
- Dark-mode logo: light mark (cream, gold, or white) on transparent
- Don’t use a white-background block behind your logo. The transparency should let the canvas show through.
How the swap works (technical)
The plugin uses CSS content: url() to swap the displayed image on the existing <img> element. This works in all modern browsers and avoids needing JavaScript or a runtime image-set polyfill. The swap is triggered by the data-color-mode="dark" attribute on <html>, the .lg-footer selector for footer use, and the .lg-section-dark class for any section you mark as dark.
This means the dark logo even works for sites using a custom HTML logo via the Site Identity → Logo WP feature — no template overrides needed.