Update docs apps filter field based on theme

Author: N2D4

.claude/CLAUDE-KNOWLEDGE.md

@@ -400,3 +400,6 @@ A: Root `dev` starts the OpenAPI docs watcher at the same time as package `dev`
 
 ## Q: How do SDK source tests replace the compile-time client version sentinel?
 A: `packages/template/vitest.config.ts` installs a Vite transform plugin for Vitest that replaces `STACK_COMPILE_TIME_CLIENT_PACKAGE_VERSION_SENTINEL` with `js <package-name>@<version>` from the local package.json. Keep the plugin in `packages/template` so `pnpm pre`/`scripts/generate-sdks.ts` propagates it to `packages/js`, `packages/react`, and `packages/stack`; otherwise tests importing `common.ts` throw `Client version was not replaced` before test collection.
+
+## Q: How does the Mintlify apps sidebar filter stay in sync with theme changes?
+A: `docs-mintlify/apps-sidebar-filter.js` injects the Apps filter with inline styles, so the MutationObserver must reapply `applySidebarAppsFilterTheme` when an existing input is found. Theme detection should handle both `html.dark` and `data-theme="dark"` signals.

docs-mintlify/apps-sidebar-filter.js

@@ -2,8 +2,16 @@
   const SEARCH_ATTRIBUTE = "data-apps-sidebar-search";
   const EMPTY_ATTRIBUTE = "data-apps-sidebar-empty";
 
+  function isPageDarkTheme() {
+    const body = document.body;
+    return document.documentElement.classList.contains("dark")
+      || document.documentElement.getAttribute("data-theme") === "dark"
+      || body?.classList.contains("dark") === true
+      || body?.getAttribute("data-theme") === "dark";
+  }
+
   function applySidebarAppsFilterTheme(searchInput, emptyState, clearFilterButton) {
-    const isDark = document.documentElement.classList.contains("dark");
+    const isDark = isPageDarkTheme();
     searchInput.style.background = isDark ? "rgba(17,24,39,0.72)" : "rgba(248,250,252,0.98)";
     searchInput.style.color = isDark ? "#e5e7eb" : "#111827";
     searchInput.style.border = isDark ? "1px solid rgba(75,85,99,0.9)" : "1px solid rgba(203,213,225,0.95)";
@@ -29,7 +37,13 @@
       return false;
     }
 
-    if (appsHeader.querySelector(`[${SEARCH_ATTRIBUTE}="true"]`) != null) {
+    const existingSearchInput = appsHeader.querySelector(`input[${SEARCH_ATTRIBUTE}="true"]`);
+    if (existingSearchInput != null) {
+      const existingEmptyState = appsGroupContainer.querySelector(`div[${EMPTY_ATTRIBUTE}="true"]`);
+      const existingClearFilterButton = existingEmptyState?.querySelector("button");
+      if (existingEmptyState != null && existingClearFilterButton != null) {
+        applySidebarAppsFilterTheme(existingSearchInput, existingEmptyState, existingClearFilterButton);
+      }
       return true;
     }
 
@@ -126,6 +140,6 @@
   if (typeof window !== "undefined" && typeof document !== "undefined") {
     window.requestAnimationFrame(installWhenReady);
     const observer = new MutationObserver(() => installAppsSidebarFilter());
-    observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["class"] });
+    observer.observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "data-theme"] });
   }
 })();