Feat: api page dark mode (#18078)

web/app/(commonLayout)/datasets/ApiServer.tsx

@@ -1,39 +0,0 @@
-'use client'
-
-import type { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import CopyFeedback from '@/app/components/base/copy-feedback'
-import SecretKeyButton from '@/app/components/develop/secret-key/secret-key-button'
-import { randomString } from '@/utils'
-
-type ApiServerProps = {
-  apiBaseUrl: string
-}
-const ApiServer: FC<ApiServerProps> = ({
-  apiBaseUrl,
-}) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className='flex flex-wrap items-center gap-y-2'>
-      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-white bg-white/80 pl-1.5 pr-1 leading-5'>
-        <div className='mr-0.5 h-5 shrink-0 rounded-md border border-gray-200 px-1.5 text-[11px] text-gray-500'>{t('appApi.apiServer')}</div>
-        <div className='w-fit truncate px-1 text-[13px] font-medium text-gray-800 sm:w-[248px]'>{apiBaseUrl}</div>
-        <div className='mx-1 h-[14px] w-[1px] bg-gray-200'></div>
-        <CopyFeedback
-          content={apiBaseUrl}
-          selectorId={randomString(8)}
-          className={'!h-6 !w-6 hover:bg-gray-200'}
-        />
-      </div>
-      <div className='mr-2 flex h-8 items-center rounded-lg border-[0.5px] border-[#D1FADF] bg-[#ECFDF3] px-3 text-xs font-semibold text-[#039855]'>
-        {t('appApi.ok')}
-      </div>
-      <SecretKeyButton
-        className='!h-8 shrink-0 bg-white'
-      />
-    </div>
-  )
-}
-
-export default ApiServer

web/app/(commonLayout)/datasets/Container.tsx

@@ -11,7 +11,7 @@ import { useQuery } from '@tanstack/react-query'
 import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
 import Datasets from './Datasets'
 import DatasetFooter from './DatasetFooter'
-import ApiServer from './ApiServer'
+import ApiServer from '../../components/develop/ApiServer'
 import Doc from './Doc'
 import TabSliderNew from '@/app/components/base/tab-slider-new'
 import TagManagementModal from '@/app/components/base/tag-management'

web/app/(commonLayout)/datasets/Doc.tsx

@@ -9,6 +9,9 @@ import TemplateZh from './template/template.zh.mdx'
 import TemplateJa from './template/template.ja.mdx'
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n/language'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+import cn from '@/utils/classnames'
 
 type DocProps = {
   apiBaseUrl: string
@@ -19,6 +22,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
   const { t } = useTranslation()
   const [toc, setToc] = useState<Array<{ href: string; text: string }>>([])
   const [isTocExpanded, setIsTocExpanded] = useState(false)
+  const { theme } = useTheme()
 
   // Set initial TOC expanded state based on screen width
   useEffect(() => {
@@ -83,12 +87,12 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
       <div className={`fixed right-20 top-32 z-10 transition-all ${isTocExpanded ? 'w-64' : 'w-10'}`}>
         {isTocExpanded
           ? (
-            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-gray-50 p-4 shadow-md">
+            <nav className="toc max-h-[calc(100vh-150px)] w-full overflow-y-auto rounded-lg bg-components-panel-bg p-4 shadow-md">
               <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-lg font-semibold">{t('appApi.develop.toc')}</h3>
+                <h3 className="text-lg font-semibold text-text-primary">{t('appApi.develop.toc')}</h3>
                 <button
                   onClick={() => setIsTocExpanded(false)}
-                  className="text-gray-500 hover:text-gray-700"
+                  className="text-text-tertiary hover:text-text-secondary"
                 >
                   ✕
                 </button>
@@ -98,7 +102,7 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
                   <li key={index}>
                     <a
                       href={item.href}
-                      className="text-gray-600 transition-colors duration-200 hover:text-gray-900 hover:underline"
+                      className="text-text-secondary transition-colors duration-200 hover:text-text-primary hover:underline"
                       onClick={e => handleTocClick(e, item)}
                     >
                       {item.text}
@@ -111,13 +115,13 @@ const Doc = ({ apiBaseUrl }: DocProps) => {
           : (
             <button
               onClick={() => setIsTocExpanded(true)}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-gray-50 shadow-md transition-colors duration-200 hover:bg-gray-100"
+              className="flex h-10 w-10 items-center justify-center rounded-full bg-components-button-secondary-bg shadow-md transition-colors duration-200 hover:bg-components-button-secondary-bg-hover"
             >
-              <RiListUnordered className="h-6 w-6" />
+              <RiListUnordered className="h-6 w-6 text-components-button-secondary-text" />
             </button>
           )}
       </div>
-      <article className='prose-xl prose mx-1 rounded-t-xl bg-white px-4 pt-16 sm:mx-12'>
+      <article className={cn('prose-xl prose mx-1 rounded-t-xl bg-background-default px-4 pt-16 sm:mx-12', theme === Theme.dark && 'dark:prose-invert')}>
         {Template}
       </article>
     </div>