diff --git a/src/components/ui/FetchedTags.vue b/src/components/ui/FetchedTags.vue
index d05e9c40f..beaa85bfe 100644
--- a/src/components/ui/FetchedTags.vue
+++ b/src/components/ui/FetchedTags.vue
@@ -61,7 +61,7 @@ const tags = computed(() => {
     .inline-tag {
         height: 1rem;
         margin: 0.05rem;
-        color: $secondary;
+        color: $color-font-secondary;
         text-align: center;
         font-size: smaller;
         padding: 1px;
diff --git a/src/components/ui/QCalendarMonthWrapper.vue b/src/components/ui/QCalendarMonthWrapper.vue
index f99f6f4d7..25491417d 100644
--- a/src/components/ui/QCalendarMonthWrapper.vue
+++ b/src/components/ui/QCalendarMonthWrapper.vue
@@ -147,7 +147,7 @@ const containerClasses = computed(() => {
     .q-calendar-month__head--workweek,
     .q-calendar-month__head--weekday.q-calendar__center.q-calendar__ellipsis {
         text-transform: capitalize;
-        color: #777;
+        color: var(---color-font-secondary);
         font-weight: bold;
         font-size: 0.8rem;
         text-align: center;
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 899ae4397..da6cefb12 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -32,7 +32,7 @@ $primary-light: lighten($primary, 35%);
 $dark-shadow-color: black;
 $layout-shadow-dark: 0 0 10px 2px #00000033, 0 0px 10px #0000003d;
 $spacing-md: 16px;
-
+$color-font-secondary: #777;
 .bg-success {
     background-color: $positive;
 }