propagate dark/light theme to algolia search bar (#5231)

* propagate dark/light theme to algolia search bar

Signed-off-by: cosmicBboy <[email protected]>

* make sure escape key closes algolia searchbar

Signed-off-by: cosmicBboy <[email protected]>

* debug

Signed-off-by: cosmicBboy <[email protected]>

* remove log

Signed-off-by: cosmicBboy <[email protected]>

---------

Signed-off-by: cosmicBboy <[email protected]>

docs/_static/custom.js

@@ -62,6 +62,50 @@ function scrollToActive() {
     window.addEventListener("beforeunload", () => {
       sessionStorage.setItem("sidebar-scroll-top", sidebar.scrollTop);
     });
-  }
+}
+
+
+function setHtmlDataTheme() {
+  // Set theme at the root html element
+  setTimeout(() => {
+    const theme = document.body.dataset.theme;
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    if (theme === "auto") {
+      document.documentElement.dataset.theme = prefersDark ? "dark" : "light";
+    } else {
+      document.documentElement.dataset.theme = theme;
+    }
+  }, 10)
+}
+
 
-document.addEventListener('DOMContentLoaded', scrollToActive);
+function setupAlgoliaTheme() {
+  // To get darkmode in the algolia search modal, we need to set the theme in
+  // the root html element. This function propagates the theme set by furo
+  // that's set in the body element.
+  const buttons = document.getElementsByClassName("theme-toggle");
+
+  // set for initial document load
+  setHtmlDataTheme();
+
+  // listen for when theme button is clicked.
+  Array.from(buttons).forEach((btn) => {
+    btn.addEventListener("click", setHtmlDataTheme);
+  });
+}
+
+
+function main() {
+  scrollToActive()
+  setupAlgoliaTheme()
+}
+
+document.addEventListener('DOMContentLoaded', main);
+window.addEventListener('keydown', (event) => {
+  if (event.code === "Escape") {
+    // make sure to prevent default behavior with escape key so that algolia
+    // modal can be closed properly.
+    event.preventDefault();
+  }
+});