diff --git a/web/themes/dark.css b/web/themes/dark.css
index 3440a1a7a8..fad5c02559 100644
--- a/web/themes/dark.css
+++ b/web/themes/dark.css
@@ -244,6 +244,8 @@ html[data-theme="dark"] {
 
   --color-components-Avatar-default-avatar-bg: #222225;
 
+  --color-components-label-gray: #C8CEDA24;
+
   --color-text-primary: #FBFBFC;
   --color-text-secondary: #D9D9DE;
   --color-text-tertiary: #C8CEDA99;
diff --git a/web/themes/light.css b/web/themes/light.css
index 717226e462..ecc1930360 100644
--- a/web/themes/light.css
+++ b/web/themes/light.css
@@ -244,6 +244,8 @@ html[data-theme="light"] {
 
   --color-components-Avatar-default-avatar-bg: #D0D5DC;
 
+  --color-components-label-gray: #F2F4F7;
+
   --color-text-primary: #101828;
   --color-text-secondary: #354052;
   --color-text-tertiary: #676F83;
diff --git a/web/themes/tailwind-theme-var-define.ts b/web/themes/tailwind-theme-var-define.ts
index 643c96d1a1..9d17c361f8 100644
--- a/web/themes/tailwind-theme-var-define.ts
+++ b/web/themes/tailwind-theme-var-define.ts
@@ -244,6 +244,8 @@ const vars = {
 
   'components-Avatar-default-avatar-bg': 'var(--color-components-Avatar-default-avatar-bg)',
 
+  'components-label-gray': 'var(--color-components-label-gray)',
+
   'text-primary': 'var(--color-text-primary)',
   'text-secondary': 'var(--color-text-secondary)',
   'text-tertiary': 'var(--color-text-tertiary)',