From bf5077bf2463f696f832ebf2d1989ca68deaa7f3 Mon Sep 17 00:00:00 2001
From: Siddharth Ganesan <33737564+Sg312@users.noreply.github.com>
Date: Tue, 23 Jun 2026 12:21:32 -0700
Subject: [PATCH] fix(skills): fix skills icon showing up (#5187)

---
 .../sub-block/components/skill-input/skill-input.tsx       | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index 6a7ea6b1bb..4f355f65c6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -155,11 +155,8 @@ export function SkillInput({
                   }}
                 >
                   <div className='flex min-w-0 flex-1 items-center gap-2'>
-                    <div
-                      className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm'
-                      style={{ backgroundColor: '#e0e0e0' }}
-                    >
-                      <AgentSkillsIcon className='size-[10px] text-[var(--border)]' />
+                    <div className='flex size-[16px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--border-1)]'>
+                      <AgentSkillsIcon className='size-[10px] text-[var(--text-icon)]' />
                     </div>
                     <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {formatDisplayText(skillName, { workflowSearchHighlight })}