docs: website SearchBar support dark theme (#40652)

.dumi/theme/common/GlobalStyles.tsx

@@ -13,6 +13,7 @@ import {
   PreviewImage,
   Reset,
   Responsive,
+  SearchBar,
 } from './styles';
 
 const GlobalStyles = () => (
@@ -30,6 +31,7 @@ const GlobalStyles = () => (
     <PreviewImage />
     <ColorStyle />
     <HeadingAnchor />
+    <SearchBar />
   </>
 );
 

.dumi/theme/common/styles/SearchBar.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { css, Global } from '@emotion/react';
+import useSiteToken from '../../../hooks/useSiteToken';
+
+const THEME_PREFIX = 'dumi-default-';
+
+export default () => {
+  const { token } = useSiteToken();
+
+  return (
+    <Global
+      styles={css`
+        html {
+          .${THEME_PREFIX}search-bar {
+            &-input {
+              color: ${token.colorText};
+              background: ${token.colorBgContainer};
+              &:focus {
+                background: ${token.colorBgContainer};
+              }
+              &::placeholder {
+                color: ${token.colorTextPlaceholder} !important;
+              }
+            }
+          }
+          .${THEME_PREFIX}search-popover {
+            background-color: ${token.colorBgElevated} !important;
+            &::before {
+              border-bottom-color: ${token.colorBgElevated} !important;
+            }
+          }
+          .${THEME_PREFIX}search-result {
+            dl {
+              dt {
+                background-color: ${token.controlItemBgActive} !important;
+              }
+              dd {
+                a {
+                  &:hover {
+                    background-color: ${token.controlItemBgHover};
+                    h4,
+                    p {
+                      color: ${token.colorText} !important;
+                    }
+                    svg {
+                      fill: ${token.colorText} !important;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      `}
+    />
+  );
+};

.dumi/theme/common/styles/index.ts

@@ -10,3 +10,4 @@ export { default as BrowserMockup } from './BrowserMockup';
 export { default as Responsive } from './Responsive';
 export { default as NProgress } from './NProgress';
 export { default as PreviewImage } from './PreviewImage';
+export { default as SearchBar } from './SearchBar';