Feat: dark mode of app configure

web/app/components/app/app-publisher/index.tsx

@@ -143,22 +143,19 @@ const AppPublisher = ({
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='z-[11]'>
-        <div className='w-[336px] bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-xl'>
+        <div className='w-[336px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl'>
           <div className='p-4 pt-3'>
-            <div className='flex items-center h-6 text-xs font-medium text-gray-500 uppercase'>
+            <div className='flex items-center h-6 system-xs-medium-uppercase text-text-tertiary'>
               {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
             </div>
             {publishedAt
               ? (
                 <div className='flex justify-between items-center h-[18px]'>
-                  <div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-gray-700'>
+                  <div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-text-secondary'>
                     {t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
                   </div>
                   <Button
-                    className={`
-                      ml-2 px-2 text-primary-600
-                      ${published && 'text-primary-300 border-gray-100'}
-                    `}
+                    variant='secondary-accent'
                     size='small'
                     onClick={handleRestore}
                     disabled={published}
@@ -168,7 +165,7 @@ const AppPublisher = ({
                 </div>
               )
               : (
-                <div className='flex items-center h-[18px] leading-[18px] text-[13px] font-medium text-gray-700'>
+                <div className='flex items-center h-[18px] leading-[18px] text-[13px] font-medium text-text-secondary'>
                   {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
                 </div>
               )}
@@ -196,7 +193,7 @@ const AppPublisher = ({
               )
             }
           </div>
-          <div className='p-4 pt-3 border-t-[0.5px] border-t-black/5'>
+          <div className='p-4 pt-3 border-t-[0.5px] border-divider-regular'>
             <SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
             {appDetail?.mode === 'workflow'
               ? (

web/app/components/app/app-publisher/publish-with-multiple-model.tsx

@@ -77,21 +77,21 @@ const PublishWithMultipleModel: FC<PublishWithMultipleModelProps> = ({
         </Button>
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className='mt-1 w-[288px] z-50'>
-        <div className='p-1 rounded-lg border-[0.5px] border-gray-200 shadow-lg bg-white'>
-          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-gray-500'>
+        <div className='p-1 rounded-lg border-[0.5px] border-components-panel-border shadow-lg bg-components-panel-bg'>
+          <div className='flex items-center px-3 h-[22px] text-xs font-medium text-text-tertiary'>
             {t('appDebug.publishAs')}
           </div>
           {
             validModelConfigs.map((item, index) => (
               <div
                 key={item.id}
-                className='flex items-center h-8 px-3 text-sm text-gray-500 rounded-lg cursor-pointer hover:bg-gray-100'
+                className='flex items-center h-8 px-3 text-sm text-text-tertiary rounded-lg cursor-pointer hover:bg-state-base-hover'
                 onClick={() => handleSelect(item)}
               >
                 <span className='italic min-w-[18px]'>#{index + 1}</span>
                 <ModelIcon modelName={item.model} provider={item.providerItem} className='ml-2' />
                 <div
-                  className='ml-1 text-gray-700 truncate'
+                  className='ml-1 text-text-secondary truncate'
                   title={item.modelItem.label[language]}
                 >
                   {item.modelItem.label[language]}

web/app/components/app/app-publisher/suggested-action.tsx

@@ -14,8 +14,8 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props }
     target='_blank'
     rel='noreferrer'
     className={classNames(
-      'flex justify-start items-center gap-2 h-[34px] px-2.5 bg-gray-100 rounded-lg transition-colors [&:not(:first-child)]:mt-1',
-      disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-primary-50 hover:text-primary-600 cursor-pointer',
+      'flex justify-start items-center gap-2 h-[34px] px-2.5 bg-background-section-burn rounded-lg transition-colors text-text-secondary [&:not(:first-child)]:mt-1',
+      disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-state-accent-hover hover:text-text-accent cursor-pointer',
       className,
     )}
     {...props}

web/app/components/app/configuration/base/feature-panel/index.tsx

@@ -23,7 +23,7 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   children,
 }) => {
   return (
-    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
+    <div className={cn('rounded-xl border-t-[0.5px] border-l-[0.5px] border-effects-highlight bg-background-section-burn pb-3', noBodySpacing && 'pb-0', className)}>
       {/* Header */}
       <div className={cn('px-3 pt-2', hasHeaderBottomBorder && 'border-b border-divider-subtle')}>
         <div className='flex justify-between items-center h-8'>

web/app/components/app/configuration/base/operation-btn/index.tsx

@@ -2,7 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { PlusIcon } from '@heroicons/react/20/solid'
+import {
+  RiAddLine,
+  RiEditLine,
+} from '@remixicon/react'
 import cn from '@/utils/classnames'
 
 export type IOperationBtnProps = {
@@ -13,11 +16,8 @@ export type IOperationBtnProps = {
 }
 
 const iconMap = {
-  add: <PlusIcon className='w-3.5 h-3.5' />,
-  edit: (<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.99998 11.6666H12.25M1.75 11.6666H2.72682C3.01217 11.6666 3.15485 11.6666 3.28912 11.6344C3.40816 11.6058 3.52196 11.5587 3.62635 11.4947C3.74408 11.4226 3.84497 11.3217 4.04675 11.1199L11.375 3.79164C11.8583 3.30839 11.8583 2.52488 11.375 2.04164C10.8918 1.55839 10.1083 1.55839 9.62501 2.04164L2.29674 9.3699C2.09496 9.57168 1.99407 9.67257 1.92192 9.7903C1.85795 9.89469 1.81081 10.0085 1.78224 10.1275C1.75 10.2618 1.75 10.4045 1.75 10.6898V11.6666Z" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-  ),
+  add: <RiAddLine className='w-3.5 h-3.5' />,
+  edit: <RiEditLine className='w-3.5 h-3.5' />,
 }
 
 const OperationBtn: FC<IOperationBtnProps> = ({
@@ -29,7 +29,7 @@ const OperationBtn: FC<IOperationBtnProps> = ({
   const { t } = useTranslation()
   return (
     <div
-      className={cn(className, 'flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200 select-none')}
+      className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-text-secondary cursor-pointer hover:bg-state-base-hover select-none', className)}
       onClick={onClick}>
       <div>
         {iconMap[type]}

web/app/components/app/configuration/config-prompt/conversation-history/edit-modal.tsx

@@ -28,17 +28,17 @@ const EditModal: FC<Props> = ({
       isShow={isShow}
       onClose={onClose}
     >
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}
+      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.userPrefix')}</div>
+      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
         value={tempData.user_prefix}
         onChange={e => setTempData({
           ...tempData,
           user_prefix: e.target.value,
         })}
       />
 
-      <div className={'mt-6 font-medium text-sm leading-[21px] text-gray-900'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
-      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-gray-100'}
+      <div className={'mt-6 font-medium text-sm leading-[21px] text-text-primary'}>{t('appDebug.feature.conversationHistory.editModal.assistantPrefix')}</div>
+      <input className={'mt-2 w-full rounded-lg h-10 box-border px-3 text-sm leading-10 bg-components-input-bg-normal'}
         value={tempData.assistant_prefix}
         onChange={e => setTempData({
           ...tempData,
@@ -48,8 +48,8 @@ const EditModal: FC<Props> = ({
       />
 
       <div className='mt-10 flex justify-end'>
-        <Button className='mr-2 flex-shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
-        <Button variant='primary' className='flex-shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
+        <Button className='mr-2 shrink-0' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' className='shrink-0' onClick={() => onSave(tempData)} loading={saveLoading}>{t('common.operation.save')}</Button>
       </div>
     </Modal>
   )

web/app/components/app/configuration/config-prompt/conversation-history/history-panel.tsx

@@ -9,7 +9,7 @@ import { MessageClockCircle } from '@/app/components/base/icons/src/vender/solid
 import I18n from '@/context/i18n'
 import { LanguagesSupported } from '@/i18n/language'
 
-interface Props {
+type Props = {
   showWarning: boolean
   onShowEditModal: () => void
 }
@@ -30,20 +30,20 @@ const HistoryPanel: FC<Props> = ({
         </div>
       }
       headerIcon={
-        <div className='p-1 rounded-md bg-white shadow-xs'>
+        <div className='p-1 rounded-md shadow-xs'>
           <MessageClockCircle className='w-4 h-4 text-[#DD2590]' />
         </div>}
       headerRight={
         <div className='flex items-center'>
-          <div className='text-xs text-gray-500'>{t('appDebug.feature.conversationHistory.description')}</div>
-          <div className='ml-3 w-[1px] h-[14px] bg-gray-200'></div>
+          <div className='text-xs text-text-tertiary'>{t('appDebug.feature.conversationHistory.description')}</div>
+          <div className='ml-3 w-[1px] h-[14px] bg-divider-regular'></div>
           <OperationBtn type="edit" onClick={onShowEditModal} />
         </div>
       }
       noBodySpacing
     >
       {showWarning && (
-        <div className='flex justify-between py-2 px-3 rounded-b-xl bg-[#FFFAEB] text-xs text-gray-700'>
+        <div className='flex justify-between py-2 px-3 rounded-b-xl bg-background-section-burn text-xs text-text-secondary'>
           <div>{t('appDebug.feature.conversationHistory.tip')}
             <a href={`${locale === LanguagesSupported[1]
               ? 'https://docs.dify.ai/v/zh-hans/guides/application-design/prompt-engineering'

web/app/components/app/configuration/config-var/config-modal/index.tsx

@@ -23,7 +23,7 @@ import { DEFAULT_VALUE_MAX_LEN } from '@/config'
 
 const TEXT_MAX_LENGTH = 256
 
-export interface IConfigModalProps {
+export type IConfigModalProps = {
   isCreate?: boolean
   payload?: InputVar
   isShow: boolean