Fix: Update the background color and hover effect of secondary buttons (#23186)

web/app/components/workflow-app/components/workflow-header/features-trigger.tsx

 import type { PublishWorkflowParams } from '@/types/workflow'
 import { fetchAppDetail } from '@/service/apps'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 const FeaturesTrigger = () => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore(s => s.appDetail)
   const appID = appDetail?.id
 
   return (
     <>
-      <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
+      <Button
+        className={cn(
+          'text-components-button-secondary-text',
+          theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        )}
+        onClick={handleShowFeatures}
+      >
         <RiApps2AddLine className='mr-1 h-4 w-4 text-components-button-secondary-text' />
         {t('workflow.common.features')}
       </Button>

web/app/components/workflow/header/chat-variable-button.tsx

 import Button from '@/app/components/base/button'
 import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 const ChatVariableButton = ({ disabled }: { disabled: boolean }) => {
+  const { theme } = useTheme()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
   }
 
   return (
-    <Button className='p-2' disabled={disabled} onClick={handleClick}>
+    <Button
+      className={cn(
+        'p-2',
+        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}
+      disabled={disabled}
+      onClick={handleClick}
+    >
       <BubbleX className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
   )

web/app/components/workflow/header/env-button.tsx

 import Button from '@/app/components/base/button'
 import { Env } from '@/app/components/base/icons/src/vender/line/others'
 import { useStore } from '@/app/components/workflow/store'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 const EnvButton = ({ disabled }: { disabled: boolean }) => {
+  const { theme } = useTheme()
   const setShowChatVariablePanel = useStore(s => s.setShowChatVariablePanel)
   const setShowEnvPanel = useStore(s => s.setShowEnvPanel)
   const setShowDebugAndPreviewPanel = useStore(s => s.setShowDebugAndPreviewPanel)
   }
 
   return (
-    <Button className='p-2' disabled={disabled} onClick={handleClick}>
+    <Button
+      className={cn(
+        'p-2',
+        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}
+      disabled={disabled}
+      onClick={handleClick}
+    >
       <Env className='h-4 w-4 text-components-button-secondary-text' />
     </Button>
   )

web/app/components/workflow/header/header-in-restoring.tsx

 import Button from '@/app/components/base/button'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useInvalidAllLastRun } from '@/service/use-workflow'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 export type HeaderInRestoringProps = {
   onRestoreSettled?: () => void
   onRestoreSettled,
 }: HeaderInRestoringProps) => {
   const { t } = useTranslation()
+  const { theme } = useTheme()
   const workflowStore = useWorkflowStore()
   const appDetail = useAppStore.getState().appDetail
 
       <div>
         <RestoringTitle />
       </div>
-      <div className='flex items-center justify-end gap-x-2'>
-        <Button
-          onClick={handleRestore}
-          disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
-          variant='primary'
-        >
-          {t('workflow.common.restore')}
-        </Button>
-        <Button
-          className='text-components-button-secondary-accent-text'
-          onClick={handleCancelRestore}
-        >
-          <div className='flex items-center gap-x-0.5'>
-            <RiHistoryLine className='h-4 w-4' />
-            <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
+      <div className=' flex items-center justify-end gap-x-2'>
+          <Button
+            onClick={handleRestore}
+            disabled={!currentVersion || currentVersion.version === WorkflowVersion.Draft}
+            variant='primary'
+            className={cn(
+              theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            )}
+          >
+            {t('workflow.common.restore')}
+          </Button>
+          <Button
+            onClick={handleCancelRestore}
+            className={cn(
+              'text-components-button-secondary-accent-text',
+              theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+            )}
+          >
+            <div className='flex items-center gap-x-0.5'>
+              <RiHistoryLine className='h-4 w-4' />
+              <span className='px-0.5'>{t('workflow.common.exitVersions')}</span>
           </div>
         </Button>
       </div>

web/app/components/workflow/header/run-and-history.tsx

 } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { EVENT_WORKFLOW_STOP } from '@/app/components/workflow/variable-inspect/types'
+import useTheme from '@/hooks/use-theme'
 
 const RunMode = memo(() => {
   const { t } = useTranslation()
 PreviewMode.displayName = 'PreviewMode'
 
 const RunAndHistory: FC = () => {
+  const { theme } = useTheme()
   const isChatMode = useIsChatMode()
   const { nodesReadOnly } = useNodesReadOnly()
 
   return (
-    <div className='flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs'>
-      {
-        !isChatMode && <RunMode />
-      }
-      {
-        isChatMode && <PreviewMode />
-      }
-      <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
-      <ViewHistory />
-      <Checklist disabled={nodesReadOnly} />
-    </div>
+    <>
+      <div className={cn(
+        'flex h-8 items-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-0.5 shadow-xs',
+        theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+      )}>
+        {
+          !isChatMode && <RunMode />
+        }
+        {
+          isChatMode && <PreviewMode />
+        }
+        <div className='mx-0.5 h-3.5 w-[1px] bg-divider-regular'></div>
+        <ViewHistory />
+        <Checklist disabled={nodesReadOnly} />
+      </div>
+    </>
   )
 }
 

web/app/components/workflow/header/version-history-button.tsx

 import Button from '../../base/button'
 import Tooltip from '../../base/tooltip'
 import { getKeyboardKeyCodeBySystem } from '../utils'
+import useTheme from '@/hooks/use-theme'
+import cn from '@/utils/classnames'
 
 type VersionHistoryButtonProps = {
   onClick: () => Promise<unknown> | unknown
 const VersionHistoryButton: FC<VersionHistoryButtonProps> = ({
   onClick,
 }) => {
+  const { theme } = useTheme()
   const handleViewVersionHistory = useCallback(async () => {
     await onClick?.()
   }, [onClick])
     e.preventDefault()
     handleViewVersionHistory()
   },
-  { exactMatch: true, useCapture: true })
+    { exactMatch: true, useCapture: true })
 
   return <Tooltip
     popupContent={<PopupContent />}
     popupClassName='rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg
     shadow-lg shadow-shadow-shadow-5 backdrop-blur-[5px] p-1.5'
   >
-    <Button
-      className={'p-2'}
-      onClick={handleViewVersionHistory}
-    >
-      <RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
-    </Button>
+      <Button
+        className={cn(
+          'p-2',
+          theme === 'dark' && 'rounded-lg border border-black/5 bg-white/10 backdrop-blur-sm',
+        )}
+        onClick={handleViewVersionHistory}
+      >
+        <RiHistoryLine className='h-4 w-4 text-components-button-secondary-text' />
+      </Button>
   </Tooltip>
 }
 

web/themes/manual-dark.css

     --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #2B2322 0%, #1E1E21 100%);
     --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(34, 34, 37, 0.00) 0%, #222225 100%);
     --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
-            rgba(24, 24, 27, 0.08) 0%,
-            rgba(0, 0, 0, 0) 100%);
+            rgba(29, 29, 32, 0.9) 0%,
+            rgba(29, 29, 32, 0.08) 100%);
     --color-line-divider-bg: linear-gradient(90deg, rgba(200, 206, 218, 0.14) 0%, rgba(0, 0, 0, 0) 100%);
     --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.03) 100%);
     --color-premium-yearly-tip-text-background: linear-gradient(91deg, #FDB022 2.18%, #F79009 108.79%);

web/themes/manual-light.css

     --color-dataset-option-card-orange-gradient: linear-gradient(90deg, #F8F2EE 0%, #F9FAFB 100%);
     --color-dataset-chunk-list-mask-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FCFCFD 100%);
     --mask-top2bottom-gray-50-to-transparent: linear-gradient(180deg,
-            rgba(200, 206, 218, 0.2) 0%,
-            rgba(255, 255, 255, 0) 100%);
+            rgba(242, 244, 247, 0.9) 0%,
+            rgba(242, 244, 247, 0.05) 100%);
     --color-line-divider-bg: linear-gradient(90deg, rgba(16, 24, 40, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
     --color-access-app-icon-mask-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.08) 100%);
     --color-premium-yearly-tip-text-background: linear-gradient(91deg, #F79009 2.18%, #DC6803 108.79%);