diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss
index 0e82a224637..b44a16306da 100644
--- a/packages/theme/styles/_colors.scss
+++ b/packages/theme/styles/_colors.scss
@@ -225,6 +225,7 @@
   --theme-calendar-event-available-bgcolor: #f6f9fe;
   --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
   --theme-calendar-event-unavailable-bgcolor: #fdece7;
+  --theme-calendar-zone: rgba(64, 109, 223, 0.1);
 
   --theme-diffview-block-header-color: rgba(56,139,253,0.1);
   --theme-diffview-line-color: var(--theme-content-color);
@@ -535,6 +536,7 @@
   --theme-calendar-event-available-bgcolor: #f6f9fe;
   --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
   --theme-calendar-event-unavailable-bgcolor: #fdece7;
+  --theme-calendar-zone: rgba(64, 109, 223, 0.1);
 
   --theme-diffview-block-header-color: rgb(221, 244, 255);
   --theme-diffview-line-color: var(--theme-content-color);
diff --git a/plugins/calendar-resources/src/components/DayCalendar.svelte b/plugins/calendar-resources/src/components/DayCalendar.svelte
index 2eb0c999616..eb5bc05fd28 100644
--- a/plugins/calendar-resources/src/components/DayCalendar.svelte
+++ b/plugins/calendar-resources/src/components/DayCalendar.svelte
@@ -1372,7 +1372,7 @@
       padding: 0.375rem;
       font-size: 0.625rem;
       color: var(--theme-dark-color);
-      background-color: rgba(64, 109, 223, 0.1);
+      background-color: var(--theme-calendar-zone);
       border-radius: 0.25rem;
 
       &.mini {