fix: update style for readthedocs search element

static/css/extensions/rtd.css

@@ -0,0 +1,11 @@
+:root {
+  --readthedocs-search-font-family: var(--sy-f-text);
+  --readthedocs-search-color: var(--sy-c-text);
+  --readthedocs-search-input-background-color: var(--gray-3);
+  --readthedocs-search-content-border-color: var(--gray-4);
+  --readthedocs-search-content-background-color: var(--sy-c-background);
+  --readthedocs-search-result-section-color: var(--sy-c-text);
+  --readthedocs-search-result-section-subheading-color: var(--sy-c-heading);
+  --readthedocs-search-result-section-highlight-color: var(--accent-9);
+  --readthedocs-search-result-section-border-color: var(--sy-c-border);
+}

static/css/modules.css

@@ -28,6 +28,7 @@
 @import "./layout/rside.css";
 @import "./layout/navigation.css";
 
+@import "./extensions/rtd.css";
 @import "./extensions/copybutton.css";
 @import "./extensions/sphinx-design.css";
 @import "./extensions/sphinx-tabs.css";

static/js/rtd.js

@@ -1,6 +1,41 @@
+const searchBoxStyle = `
+:host > div .results .hit h2 {
+  color: var(--sy-c-heading);
+  margin-bottom: 0;
+  border-bottom: 0;
+  font-weight: 600;
+}
+:host > div .results .hit .hit-block .content {
+  color: var(--sy-c-text);
+}
+:host > div .results .hit-block a.hit:hover, :host > div .results .hit-block .hit.active {
+  background-color: var(--gray-5);
+  border-radius: 4px;
+}
+
+:host > div div.hit-block a.hit-block-heading:hover {
+  text-decoration: underline;
+}
+
+:host > div div.hit-block a.hit-block-heading i,
+:host > div div.hit-block .hit-block-heading-container .close-icon {
+  color: var(--sy-c-light);
+  margin-bottom: 0;
+  display: flex;
+}
+`
+
 document.addEventListener("readthedocs-addons-data-ready", function (event) {
   document.querySelector(".searchbox input").addEventListener("focusin", () => {
-    const event = new CustomEvent("readthedocs-search-show");
-    document.dispatchEvent(event);
-  });
+    const event = new CustomEvent("readthedocs-search-show")
+    document.dispatchEvent(event)
+  })
+  setTimeout(() => {
+    const rtdSearchElement = document.querySelector("readthedocs-search")
+    if (rtdSearchElement) {
+      const style = document.createElement('style')
+      style.textContent = searchBoxStyle
+      rtdSearchElement.shadowRoot.appendChild(style)
+    }
+  }, 1000)
 });