{"id":15,"date":"2026-04-04T17:49:09","date_gmt":"2026-04-04T17:49:09","guid":{"rendered":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/2026\/04\/04\/dark-mode\/"},"modified":"2026-04-04T17:49:09","modified_gmt":"2026-04-04T17:49:09","slug":"dark-mode","status":"publish","type":"post","link":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/2026\/04\/04\/dark-mode\/","title":{"rendered":"Dark Mode & Custom Logo"},"content":{"rendered":"

Dark mode is now expected. Browsers communicate user preference via prefers-color-scheme<\/code>, and most modern sites either follow it silently or expose a toggle. Legal Pro gives you all three options \u2014 automatic, manual, or system-with-toggle \u2014 and pairs it with dual-logo support so your branding stays legible across both modes.<\/p>\n

Three behaviour modes<\/h2>\n

Go to Appearance \u2192 Customize \u2192 Legal Pro \u2192 Light & Dark Mode<\/strong>. The Behavior<\/em> setting offers three options:<\/p>\n

Auto (follow system, no toggle)<\/h3>\n

The site silently mirrors the visitor’s OS preference. No toggle button. No persistence \u2014 it just follows the system.<\/p>\n

Use this when:<\/p>\n

    \n
  • Your audience is technical enough to understand OS-level dark mode<\/li>\n
  • You don’t want to add a UI element to the header<\/li>\n
  • You want zero friction for visitors who’ve already chosen dark at the OS level<\/li>\n<\/ul>\n

    Manual (toggle, default light)<\/h3>\n

    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<\/code> as lg_color_mode<\/code> and persists across sessions.<\/p>\n

    Use this when:<\/p>\n

      \n
    • Your audience may not have a system-level preference<\/li>\n
    • You want every visitor to see the editorial light theme on first arrival (the brand-defining first impression)<\/li>\n<\/ul>\n

      System with toggle (recommended)<\/h3>\n

      The toggle appears in the header. Initial state follows the OS preference. If the visitor explicitly toggles, that choice persists thereafter \u2014 overriding the OS preference for this site only.<\/p>\n

      This is the default and the recommended setting. It respects the visitor’s OS preference but gives them site-level control.<\/p>\n

      Toggle position<\/h2>\n

      For Manual and System modes, you can place the toggle in two places:<\/p>\n

        \n
      • Header (next to CTA)<\/strong> \u2014 small circular button to the left of the “Schedule a consultation” CTA<\/li>\n
      • Floating (bottom right)<\/strong> \u2014 fixed position, always visible. Useful for content-heavy sites where the toggle should stay accessible while reading<\/li>\n<\/ul>\n

        How no-flash works<\/h2>\n

        Dark mode visitors are particularly sensitive to “flash of light content” \u2014 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><\/code> at priority 1 \u2014 before any stylesheet loads. This script:<\/p>\n

          \n
        1. Reads the saved preference from localStorage<\/code><\/li>\n
        2. Reads the OS preference from matchMedia<\/code><\/li>\n
        3. Decides the initial state and applies data-color-mode=\"dark\"<\/code> to <html><\/code> immediately<\/li>\n<\/ol>\n

          By the time the first stylesheet renders, the dark variables are already in scope. No flash.<\/p>\n

          Reduced motion and accessibility<\/h2>\n

          The dark mode system respects prefers-reduced-motion<\/code> for the toggle’s transition animations, and the toggle button itself is keyboard-accessible (focus ring on focus, activates on Enter or Space).<\/p>\n

          Color contrast in both modes meets WCAG AA for body text and AAA for headlines \u2014 verified during development against the actual rendered tokens, not just the variable definitions.<\/p>\n

          Dual-logo support<\/h2>\n

          If you upload a single logo via WordPress’s standard Site Identity \u2192 Logo<\/em> setting, that logo appears on both light and dark backgrounds. For most logos this is fine \u2014 a black or oxblood SVG mark reads on both.<\/p>\n

          For some brands, though, the logo needs an alternate version on dark canvas \u2014 a light-on-dark variant. This is what Dual-Logo handles.<\/p>\n

          Setting up dual logos<\/h3>\n
            \n
          1. Upload your light-mode logo (the one that goes on bone canvas) under Customize \u2192 Site Identity \u2192 Logo<\/strong>.<\/li>\n
          2. Upload your dark-mode logo under Customize \u2192 Legal Pro \u2192 Dual Logo (Light\/Dark) \u2192 Dark-Background Logo<\/strong>.<\/li>\n
          3. Optional: set Max Logo Width<\/strong> to constrain both logos to the same display size (default: 160px).<\/li>\n<\/ol>\n

            The dark logo is automatically used in:<\/p>\n

              \n
            • The header when dark mode is active<\/li>\n
            • The footer (always dark canvas)<\/li>\n
            • Any section with the class lg-section-dark<\/code><\/li>\n<\/ul>\n

              Logo file recommendations<\/h3>\n

              For best results across modes:<\/p>\n

                \n
              • Use SVG when possible \u2014 sharp at any size, no resolution issues<\/li>\n
              • If you must use raster, PNG with transparent background at 2x intended display size (e.g., 320px wide for a 160px display)<\/li>\n
              • Light-mode logo: dark mark (oxblood, black, or charcoal) on transparent<\/li>\n
              • Dark-mode logo: light mark (cream, gold, or white) on transparent<\/li>\n
              • Don’t use a white-background block behind your logo. The transparency should let the canvas show through.<\/li>\n<\/ul>\n

                How the swap works (technical)<\/h2>\n

                The plugin uses CSS content: url()<\/code> to swap the displayed image on the existing <img><\/code> 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\"<\/code> attribute on <html><\/code>, the .lg-footer<\/code> selector for footer use, and the .lg-section-dark<\/code> class for any section you mark as dark.<\/p>\n

                This means the dark logo even works for sites using a custom HTML logo via the Site Identity \u2192 Logo<\/em> WP feature \u2014 no template overrides needed.<\/p>\n","protected":false},"excerpt":{"rendered":"

                Three ways to handle dark mode, plus dual-logo support so your firm mark stays legible on both light and dark backgrounds.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[30,28,29,12],"class_list":["post-15","post","type-post","status-publish","format-standard","hentry","category-pro-features","tag-accessibility","tag-dark-mode","tag-logo","tag-pro"],"_links":{"self":[{"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/posts\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":0,"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/posts\/15\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/media?parent=15"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/categories?post=15"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/docs.fasterthemes.com\/legal-wordpress-theme\/wp-json\/wp\/v2\/tags?post=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}