PaloAltoNetworks · sserrata · Mar 31, 2026 · Mar 30, 2026 · Mar 30, 2026 · Mar 30, 2026
diff --git a/demo/docusaurus.config.ts b/demo/docusaurus.config.ts
@@ -1,3 +1,4 @@
+import { themes as prismThemes } from "prism-react-renderer";
 import type * as Preset from "@docusaurus/preset-classic";
 import type { Config } from "@docusaurus/types";
 import type * as Plugin from "@docusaurus/types/src/plugin";
@@ -40,7 +41,7 @@ const config: Config = {
         },
         blog: false,
         theme: {
-          customCss: "./src/css/custom.css",
+          customCss: ["./src/css/custom.css"],
         },
         gtag: {
           trackingID: "GTM-THVM29S",
@@ -56,10 +57,14 @@ const config: Config = {
         hideable: true,
       },
     },
+    colorMode: {
+      defaultMode: "light",
+      disableSwitch: false,
+      respectPrefersColorScheme: true,
+    },
     navbar: {
-      title: "OpenAPI Docs",
       logo: {
-        alt: "Keytar",
+        alt: "OpenAPI Docs",
         src: "img/docusaurus-openapi-docs-logo.svg",
       },
       items: [
@@ -88,6 +93,7 @@ const config: Config = {
             },
           ],
         },
+        { type: "custom-PalettePicker", position: "right" },
         {
           href: "https://medium.com/palo-alto-networks-developer-blog",
           position: "right",
@@ -148,6 +154,8 @@ const config: Config = {
       copyright: `Copyright © ${new Date().getFullYear()} Palo Alto Networks, Inc. Built with Docusaurus ${DOCUSAURUS_VERSION}.`,
     },
     prism: {
+      theme: prismThemes.github,
+      darkTheme: prismThemes.dracula,
       additionalLanguages: [
         "ruby",
         "csharp",
@@ -372,6 +380,22 @@ const config: Config = {
         } satisfies Plugin.PluginOptions,
       },
     ],
+    // FOUC prevention: restore saved palette before React hydrates
+    function paletteScript() {
+      return {
+        name: "palette-fouc-script",
+        injectHtmlTags() {
+          return {
+            headTags: [
+              {
+                tagName: "script",
+                innerHTML: `try{var p=localStorage.getItem('openapi-demo-palette');if(p){var l=document.createElement('link');l.id='openapi-palette-link';l.rel='stylesheet';l.href='/themes/'+p+'.css';document.head.appendChild(l);}}catch(e){}`,
+              },
+            ],
+          };
+        },
+      };
+    },
   ],
   themes: ["docusaurus-theme-openapi-docs"],
   stylesheets: [

diff --git a/demo/src/components/PalettePicker/index.tsx b/demo/src/components/PalettePicker/index.tsx
@@ -0,0 +1,244 @@
+/* ============================================================================
+ * PalettePicker — runtime color palette switcher for the navbar.
+ *
+ * Desktop: pill button in the top bar that opens a dropdown.
+ * Mobile:  section rendered inside the hamburger drawer (mobile={true}).
+ *
+ * Dynamically injects /themes/<id>.css into <head> and persists
+ * the choice in localStorage under 'openapi-demo-palette'.
+ * ========================================================================== */
+
+import React, { useEffect, useRef, useState } from "react";
+
+import styles from "./styles.module.css";
+
+const THEMES = [
+  { id: "evergreen", label: "Evergreen", color: "#2e8555" },
+  { id: "panw", label: "PANW", color: "#004c9d" },
+  { id: "violet", label: "Violet", color: "#7c3aed" },
+  { id: "midnight", label: "Midnight", color: "#0284c7" },
+  { id: "indigo", label: "Indigo", color: "#6366f1" },
+  { id: "nord", label: "Nord", color: "#5e81ac" },
+  { id: "cyber", label: "Cyber", color: "#059669" },
+] as const;
+
+type ThemeId = (typeof THEMES)[number]["id"];
+
+const STORAGE_KEY = "openapi-demo-palette";
+const DEFAULT_PALETTE: ThemeId = "evergreen";
+
+function applyPalette(id: ThemeId): void {
+  let link = document.getElementById(
+    "openapi-palette-link"
+  ) as HTMLLinkElement | null;
+  if (!link) {
+    link = document.createElement("link");
+    link.id = "openapi-palette-link";
+    link.rel = "stylesheet";
+    document.head.appendChild(link);
+  }
+  link.href = `/themes/${id}.css`;
+  localStorage.setItem(STORAGE_KEY, id);
+}
+
+function MobileSection({
+  active,
+  onSelect,
+  current,
+}: {
+  active: ThemeId;
+  onSelect: (id: ThemeId) => void;
+  current: (typeof THEMES)[number];
+}) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className={styles.mobileRoot}>
+      <button
+        className={styles.mobileToggle}
+        onClick={() => setExpanded((e) => !e)}
+        aria-expanded={expanded}
+      >
+        <span className={styles.mobileToggleLeft}>
+          <span
+            className={styles.mobileSwatch}
+            style={{ background: current.color }}
+          />
+          <span>Color Palette</span>
+        </span>
+        <svg
+          className={`${styles.mobileChevron} ${expanded ? styles.mobileChevronOpen : ""}`}
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M2 3.5L5 6.5L8 3.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {expanded && (
+        <div className={styles.mobileGrid}>
+          {THEMES.map((theme) => (
+            <button
+              key={theme.id}
+              className={`${styles.mobileTile} ${theme.id === active ? styles.mobileTileActive : ""}`}
+              onClick={() => onSelect(theme.id)}
+              aria-pressed={theme.id === active}
+            >
+              <span
+                className={styles.mobileSwatch}
+                style={{ background: theme.color }}
+              />
+              <span>{theme.label}</span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function PalettePicker({
+  mobile,
+}: {
+  mobile?: boolean;
+}): JSX.Element | null {
+  const [open, setOpen] = useState(false);
+  const [active, setActive] = useState<ThemeId>(DEFAULT_PALETTE);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const saved =
+      (localStorage.getItem(STORAGE_KEY) as ThemeId) ?? DEFAULT_PALETTE;
+    setActive(saved);
+    if (!document.getElementById("openapi-palette-link")) {
+      applyPalette(saved);
+    }
+  }, []);
+
+  // Close dropdown on outside pointer-down (desktop only)
+  useEffect(() => {
+    if (mobile) return;
+    function onPointerDown(e: PointerEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [mobile]);
+
+  useEffect(() => {
+    if (mobile) return;
+    function onKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [mobile]);
+
+  function select(id: ThemeId) {
+    setActive(id);
+    applyPalette(id);
+    setOpen(false);
+  }
+
+  const current = THEMES.find((t) => t.id === active) ?? THEMES[0];
+
+  /* ---- Mobile drawer ---------------------------------------------------- */
+  if (mobile) {
+    return (
+      <MobileSection active={active} onSelect={select} current={current} />
+    );
+  }
+
+  /* ---- Desktop dropdown ------------------------------------------------- */
+  return (
+    <div ref={containerRef} className={styles.root}>
+      <button
+        className={styles.trigger}
+        onClick={() => setOpen((o) => !o)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={`Color palette: ${current.label}`}
+      >
+        <span
+          className={styles.swatch}
+          style={{ background: current.color }}
+          aria-hidden="true"
+        />
+        <span className={styles.triggerLabel}>{current.label}</span>
+        <svg
+          className={`${styles.chevron} ${open ? styles.chevronOpen : ""}`}
+          width="10"
+          height="10"
+          viewBox="0 0 10 10"
+          fill="none"
+          aria-hidden="true"
+        >
+          <path
+            d="M2 3.5L5 6.5L8 3.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className={styles.dropdown}
+          role="listbox"
+          aria-label="Select color palette"
+        >
+          {THEMES.map((theme) => (
+            <button
+              key={theme.id}
+              role="option"
+              aria-selected={theme.id === active}
+              className={`${styles.option} ${theme.id === active ? styles.optionActive : ""}`}
+              onClick={() => select(theme.id)}
+            >
+              <span
+                className={styles.swatch}
+                style={{ background: theme.color }}
+                aria-hidden="true"
+              />
+              {theme.label}
+              {theme.id === active && (
+                <svg
+                  className={styles.check}
+                  width="12"
+                  height="12"
+                  viewBox="0 0 12 12"
+                  fill="none"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M2 6L5 9L10 3"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}