Feat: Adapt the theme of the documentation page. #10427 (#12337)

### What problem does this PR solve?

Feat: Adapt the theme of the documentation page. #10427
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/api-service/chat-overview-modal/api-content.tsx

@@ -1,3 +1,4 @@
+import { useIsDarkTheme } from '@/components/theme-provider';
 import { useSetModalState, useTranslate } from '@/hooks/common-hooks';
 import { LangfuseCard } from '@/pages/user-setting/setting-model/langfuse';
 import apiDoc from '@parent/docs/references/http_api_reference.md';
@@ -28,6 +29,8 @@ const ApiContent = ({
 
   const { handlePreview } = usePreviewChat(idKey);
 
+  const isDarkTheme = useIsDarkTheme();
+
   return (
     <div className="pb-2">
       <Flex vertical gap={'middle'}>
@@ -47,7 +50,10 @@ const ApiContent = ({
         <div style={{ position: 'relative' }}>
           <MarkdownToc content={apiDoc} />
         </div>
-        <MarkdownPreview source={apiDoc}></MarkdownPreview>
+        <MarkdownPreview
+          source={apiDoc}
+          wrapperElement={{ 'data-color-mode': isDarkTheme ? 'dark' : 'light' }}
+        ></MarkdownPreview>
       </Flex>
       {apiKeyVisible && (
         <ChatApiKeyModal

web/src/components/ui/message.ts

@@ -1,35 +1,19 @@
-import { toast } from 'sonner';
+import { ExternalToast, toast } from 'sonner';
 
-const duration = { duration: 2500 };
+const configuration: ExternalToast = { duration: 2500, position: 'top-center' };
 
 const message = {
   success: (msg: string) => {
-    toast.success(msg, {
-      position: 'top-center',
-      closeButton: false,
-      ...duration,
-    });
+    toast.success(msg, configuration);
   },
   error: (msg: string) => {
-    toast.error(msg, {
-      position: 'top-center',
-      closeButton: false,
-      ...duration,
-    });
+    toast.error(msg, configuration);
   },
   warning: (msg: string) => {
-    toast.warning(msg, {
-      position: 'top-center',
-      closeButton: false,
-      ...duration,
-    });
+    toast.warning(msg, configuration);
   },
   info: (msg: string) => {
-    toast.info(msg, {
-      position: 'top-center',
-      closeButton: false,
-      ...duration,
-    });
+    toast.info(msg, configuration);
   },
 };
 export default message;