From d6b30efe2c3a0ac258e9be982861c2102a7764d2 Mon Sep 17 00:00:00 2001
From: KVOJJJin <jzongcode@gmail.com>
Date: Tue, 3 Jun 2025 13:53:24 +0800
Subject: [PATCH] Fix/dark theme style issues (#20566)

---
 web/app/components/base/radio/component/radio/index.tsx      | 5 +++--
 .../components/editor/code-editor/editor-support-vars.tsx    | 2 +-
 .../nodes/_base/components/variable/var-type-picker.tsx      | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/radio/component/radio/index.tsx b/web/app/components/base/radio/component/radio/index.tsx
index eddc53dd7f..7788226484 100644
--- a/web/app/components/base/radio/component/radio/index.tsx
+++ b/web/app/components/base/radio/component/radio/index.tsx
@@ -37,14 +37,15 @@ export default function Radio({
   const isChecked = groupContext ? groupContext.value === value : checked
   const divClassName = `
     flex items-center py-1 relative
-    px-7 cursor-pointer hover:bg-gray-200 rounded
+    px-7 cursor-pointer text-text-secondary rounded
+    bg-components-option-card-option-bg hover:bg-components-option-card-option-bg-hover hover:shadow-xs
   `
 
   return (
     <div className={cn(
       s.label,
       disabled ? s.disabled : '',
-      isChecked ? 'bg-white shadow' : '',
+      isChecked ? 'bg-components-option-card-option-bg-hover shadow-xs' : '',
       divClassName,
       className)}
     onClick={() => handleChange(value)}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
index 7798ed3cb2..abc7d8dbc4 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx
@@ -148,7 +148,7 @@ const CodeEditor: FC<Props> = ({
       {isShowVarPicker && (
         <div
           ref={popupRef}
-          className='w-[228px] space-y-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg'
+          className='w-[228px] space-y-1 rounded-lg border border-components-panel-border bg-components-panel-bg p-1 shadow-lg'
           style={{
             position: 'fixed',
             top: popupPosition.y,
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
index 926d7ac705..d0e42d5e47 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-type-picker.tsx
@@ -43,7 +43,7 @@ const VarReferencePicker: FC<Props> = ({
         offset={4}
       >
         <PortalToFollowElemTrigger onClick={() => setOpen(!open)} className='w-[120px] cursor-pointer'>
-          <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-components-button-secondary-bg px-2.5 text-[13px] text-text-primary'>
+          <div className='flex h-8 items-center justify-between rounded-lg border-0 bg-components-input-bg-normal px-2.5 text-[13px] text-text-primary'>
             <div className='w-0 grow truncate capitalize' title={value}>{value}</div>
             <RiArrowDownSLine className='h-3.5 w-3.5 shrink-0 text-text-secondary' />
           </div>