From c597e3b1f4081b664dc19d142c28e0e5a9239564 Mon Sep 17 00:00:00 2001
From: Davinder Singh <davibaweja@gmail.com>
Date: Tue, 17 Feb 2026 12:31:35 +0000
Subject: [PATCH] adding dark theme variables for badge tag (#31238)

GitOrigin-RevId: 08bd7ed75ecd8a934b8615374d1d976f448310d2
---
 .../components/table/cells/inline-tags.tsx    |  2 +-
 .../stylesheets/components/badge.scss         | 46 +++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
index 18406d824d..c5dc17b577 100644
--- a/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
+++ b/services/web/frontend/js/features/project-list/components/table/cells/inline-tags.tsx
@@ -56,7 +56,7 @@ function InlineTag({ tag, projectId }: InlineTagProps) {
       closeBtnProps={{
         onClick: () => handleRemoveTag(tag._id, projectId),
       }}
-      className="ms-2"
+      className="ms-2 badge-themed"
       translate="no"
     >
       {tag.name}
diff --git a/services/web/frontend/stylesheets/components/badge.scss b/services/web/frontend/stylesheets/components/badge.scss
index a3b2f13d0f..15dddfd9ab 100644
--- a/services/web/frontend/stylesheets/components/badge.scss
+++ b/services/web/frontend/stylesheets/components/badge.scss
@@ -1,3 +1,27 @@
+@mixin light-themed-badge-tag {
+  --badge-tag-themed-content-color: var(--content-primary);
+  --badge-tag-themed-btn-hover-bg: var(--neutral-40);
+  --badge-tag-themed-hover-bg: var(--neutral-30);
+  --badge-tag-themed-btn-bg: var(--neutral-20);
+}
+
+@mixin dark-themed-badge-tag {
+  --badge-tag-themed-content-color: var(--content-primary-dark);
+  --badge-tag-themed-btn-hover-bg: var(--neutral-60);
+  --badge-tag-themed-hover-bg: var(--neutral-50);
+  --badge-tag-themed-btn-bg: var(--neutral-70);
+}
+
+:root {
+  @include light-themed-badge-tag;
+
+  @include theme('default') {
+    .badge.badge-themed {
+      @include dark-themed-badge-tag;
+    }
+  }
+}
+
 $max-width: 160px;
 
 .badge {
@@ -150,3 +174,25 @@ $max-width: 160px;
     max-width: 200px;
   }
 }
+
+.badge.badge-themed {
+  .badge-close,
+  .badge-tag-content-btn {
+    &:hover {
+      background-color: var(--badge-tag-themed-btn-hover-bg);
+    }
+  }
+
+  &.badge-tag {
+    color: var(--badge-tag-themed-content-color);
+    background-color: var(--badge-tag-themed-btn-bg) !important;
+
+    &:hover {
+      background-color: var(--badge-tag-themed-hover-bg) !important;
+    }
+  }
+
+  .badge-content {
+    color: var(--badge-tag-themed-content-color);
+  }
+}