diff --git a/app/routes/calendar/components/Tags.tsx b/app/routes/calendar/components/Tags.tsx
index e5b6dd943..a05b3c062 100644
--- a/app/routes/calendar/components/Tags.tsx
+++ b/app/routes/calendar/components/Tags.tsx
@@ -27,7 +27,9 @@ export function Tags({
         <React.Fragment key={tag}>
           <li
             style={{ backgroundColor: allTags[tag].color }}
-            className={clsx({ "calendar__event__badge-tag": tag === "BADGE" })}
+            className={clsx("calendar__event__tag", {
+              "calendar__event__badge-tag": tag === "BADGE",
+            })}
           >
             {t(`tag.name.${tag}`)}
             {onDelete && (
diff --git a/app/styles/common.css b/app/styles/common.css
index 30c0a9867..7a329d2e5 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -579,7 +579,6 @@ dialog::backdrop {
   max-width: var(--tags-max-width, 18rem);
   flex-wrap: wrap;
   padding: 0;
-  color: var(--black-text);
   font-size: var(--fonts-xxs);
   font-weight: var(--semi-bold);
   gap: var(--s-1);
@@ -592,6 +591,10 @@ dialog::backdrop {
   padding-inline: var(--s-1-5);
 }
 
+.calendar__event__tag {
+  color: var(--black-text);
+}
+
 .calendar__event__badge-tag {
   color: var(--badge-text);
 }
diff --git a/app/styles/vars.css b/app/styles/vars.css
index 8a2804233..d4ec1be9e 100644
--- a/app/styles/vars.css
+++ b/app/styles/vars.css
@@ -33,7 +33,7 @@
   --theme-very-transparent: #ffc6de36;
   --theme-vibrant: hsl(255deg 78% 65%);
   --theme-transparent: #ffc6de52;
-  --theme-secondary: rgb(239, 229, 83);
+  --theme-secondary: rgb(239 229 83);
   --inactive-image-filter: grayscale(100%) brightness(130%);
   --rounded: 16px;
   --rounded-full: 200px;