diff --git a/assets/stylesheets/common/discourse-calendar.scss b/assets/stylesheets/common/discourse-calendar.scss
index b543f153..1d6c7275 100644
--- a/assets/stylesheets/common/discourse-calendar.scss
+++ b/assets/stylesheets/common/discourse-calendar.scss
@@ -1,6 +1,6 @@
 .discourse-calendar-wrap {
   margin: 0.5em 0;
-  border: 5px solid $primary-low;
+  border: 5px solid var(--primary-low, $primary-low);
 }
 
 .category-calendar .calendar {
@@ -44,7 +44,7 @@
     }
 
     .fc-bg td.fc-today {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium, $highlight-medium);
       border-style: solid;
     }
 
@@ -82,21 +82,21 @@
     .fc-button {
       border-radius: 0;
       box-shadow: none;
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
       text-transform: capitalize;
-      color: $primary;
+      color: var(--primary, $primary);
       text-shadow: none;
       border: none;
       padding: 6px 12px;
 
       &:hover {
-        background: $primary-medium;
-        color: $secondary;
+        background: var(--primary-medium, $primary-medium);
+        color: var(--secondary, $secondary);
       }
 
       &.fc-state-active {
-        background: $tertiary;
-        color: $secondary;
+        background: var(--tertiary, $tertiary);
+        color: var(--secondary, $secondary);
       }
     }
 
@@ -111,7 +111,7 @@
     .fc-list-empty,
     .fc-list-heading td,
     .fc-popover .fc-header {
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
     }
 
     .fc-content,
@@ -124,13 +124,13 @@
     td,
     th,
     thead {
-      border-color: $primary-low;
+      border-color: var(--primary-low, $primary-low);
     }
   }
 
   .fc-event,
   .fc-event-dot {
-    background-color: $tertiary;
+    background-color: var(--tertiary, $tertiary);
     border: 1px solid transparent;
 
     .fc-time {
@@ -138,9 +138,9 @@
     }
 
     &.grouped-event {
-      background-color: $primary-low;
-      border: 1px solid $primary-low-mid;
-      color: $primary;
+      background-color: var(--primary-low, $primary-low);
+      border: 1px solid var(--primary-low-mid, $primary-low-mid);
+      color: var(--primary, $primary);
 
       .emoji {
         margin-right: 0.25em;
@@ -154,7 +154,7 @@
     }
   }
   .fc-list-item-add-to-calendar {
-    color: $tertiary;
+    color: var(--tertiary, $tertiary);
     font-size: $font-down-1;
   }
 }
@@ -179,7 +179,7 @@ a.holiday {
   justify-content: space-between;
   box-sizing: border-box;
   padding: 0.5em;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low, $primary-low);
   background: $primary-very-low;
   min-height: 60px;
 
@@ -327,7 +327,7 @@ $bg-in-working-hours: dark-light-choose(
   }
 
   .group-timezone {
-    color: $primary;
+    color: var(--primary, $primary);
     background-color: $bg-normal;
     transition: opacity 0.4s;
     opacity: 0.5;
diff --git a/assets/stylesheets/common/discourse-post-event-builder.scss b/assets/stylesheets/common/discourse-post-event-builder.scss
index 2781a1c3..05e0f9e7 100644
--- a/assets/stylesheets/common/discourse-post-event-builder.scss
+++ b/assets/stylesheets/common/discourse-post-event-builder.scss
@@ -109,7 +109,7 @@
           flex-direction: column;
 
           .description {
-            color: $primary-medium;
+            color: var(--primary-medium, $primary-medium);
           }
         }
       }
diff --git a/assets/stylesheets/common/discourse-post-event-core-ext.scss b/assets/stylesheets/common/discourse-post-event-core-ext.scss
index 6345ab6f..ff156ca8 100644
--- a/assets/stylesheets/common/discourse-post-event-core-ext.scss
+++ b/assets/stylesheets/common/discourse-post-event-core-ext.scss
@@ -1,7 +1,7 @@
 .raw-topic-link {
   .event-date {
     font-size: $font-down-2;
-    background: $primary-low;
+    background: var(--primary-low, $primary-low);
     padding: 0.25em;
     border-radius: 3px;
     vertical-align: middle;
@@ -12,8 +12,8 @@
 .header-title {
   .event-date {
     font-size: $font-down-3;
-    background: $primary-low;
-    color: $primary-high;
+    background: var(--primary-low, $primary-low);
+    color: var(--primary-high, $primary-high);
     padding: 0.25em;
     border-radius: 3px;
     vertical-align: middle;
diff --git a/assets/stylesheets/common/discourse-post-event-invitees.scss b/assets/stylesheets/common/discourse-post-event-invitees.scss
index 8d2432b2..40d3b3df 100644
--- a/assets/stylesheets/common/discourse-post-event-invitees.scss
+++ b/assets/stylesheets/common/discourse-post-event-invitees.scss
@@ -15,7 +15,7 @@
       padding: 0.5em;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low, $primary-low);
 
       &:last-child {
         border: none;
@@ -31,11 +31,11 @@
         margin-left: 1em;
 
         &.going {
-          color: $success;
+          color: var(--success, $success);
         }
 
         &.not_going {
-          color: $danger;
+          color: var(--danger, $danger);
         }
       }
     }
diff --git a/assets/stylesheets/common/discourse-post-event-preview.scss b/assets/stylesheets/common/discourse-post-event-preview.scss
index 2df21b7f..6a5e3c92 100644
--- a/assets/stylesheets/common/discourse-post-event-preview.scss
+++ b/assets/stylesheets/common/discourse-post-event-preview.scss
@@ -1,9 +1,9 @@
 .discourse-post-event-preview {
-  background: $secondary;
+  background: var(--secondary, $secondary);
   align-items: center;
   flex-direction: column;
   padding: 0.5em;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   display: flex;
   flex: 1 0 auto;
 
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index f0361af2..b780e0c2 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -2,9 +2,9 @@
   display: flex;
 
   .discourse-post-event-widget {
-    border: 5px solid $primary-low;
+    border: 5px solid var(--primary-low, $primary-low);
     display: flex;
-    background: $secondary;
+    background: var(--secondary, $secondary);
     margin: 5px 0;
     flex-direction: column;
     flex: 1 0 auto;
@@ -98,7 +98,7 @@
     .status-and-creators {
       display: flex;
       align-items: center;
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
       font-size: $font-down-1;
       margin: 0.25em 0;
 
@@ -122,7 +122,7 @@
 
       .status {
         &.expired {
-          color: $danger-medium;
+          color: var(--danger-medium, $danger-medium);
         }
 
         .d-icon {
@@ -145,7 +145,7 @@
       &.status-going {
         .widget-dropdown-header {
           .d-icon-check {
-            color: $success;
+            color: var(--success, $success);
           }
         }
 
@@ -161,7 +161,7 @@
 
         .widget-dropdown-header {
           .d-icon-star {
-            color: $tertiary;
+            color: var(--tertiary, $tertiary);
           }
         }
       }
@@ -205,7 +205,7 @@
 
         .invited {
           font-weight: 500;
-          color: $primary-medium;
+          color: var(--primary-medium, $primary-medium);
         }
       }
     }
@@ -230,15 +230,15 @@
         }
 
         &.status-going .avatar-flair {
-          color: $success;
+          color: var(--success, $success);
         }
 
         &.status-not_going .avatar-flair {
-          color: $danger;
+          color: var(--danger, $danger);
         }
 
         &.status-interested .avatar-flair {
-          color: $tertiary;
+          color: var(--tertiary, $tertiary);
         }
       }
 
@@ -250,15 +250,15 @@
           position: absolute;
           right: 0;
           bottom: 0;
-          background: $secondary;
+          background: var(--secondary, $secondary);
           border-radius: 50%;
           height: 16px;
           width: 16px;
           display: flex;
           align-items: center;
           justify-content: center;
-          color: $primary-medium;
-          border: 1px solid $primary-low;
+          color: var(--primary-medium, $primary-medium);
+          border: 1px solid var(--primary-low, $primary-low);
 
           .d-icon {
             font-size: $font-down-3;
@@ -281,7 +281,7 @@
     flex: 1;
 
     .d-icon {
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
     }
   }
 
@@ -296,11 +296,11 @@
   .event-dates {
     .participants {
       margin-left: 0.5em;
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
     }
 
     .date {
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
       margin-left: 1em;
 
       .discourse-local-date {
@@ -311,7 +311,7 @@
     }
 
     .separator {
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
       margin: 0 0.5em;
       text-align: center;
     }
diff --git a/assets/stylesheets/common/upcoming-events-calendar.scss b/assets/stylesheets/common/upcoming-events-calendar.scss
index 9b994fa1..9f3fbdaf 100644
--- a/assets/stylesheets/common/upcoming-events-calendar.scss
+++ b/assets/stylesheets/common/upcoming-events-calendar.scss
@@ -11,7 +11,7 @@
     }
 
     .fc-bg td.fc-today {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium, $highlight-medium);
       border-style: solid;
     }
 
@@ -49,22 +49,22 @@
     .fc-button {
       border-radius: 0;
       box-shadow: none;
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
       text-transform: capitalize;
-      color: $primary;
+      color: var(--primary, $primary);
       text-shadow: none;
       border: none;
 
       padding: 6px 12px;
 
       &:hover {
-        background: $primary-medium;
-        color: $secondary;
+        background: var(--primary-medium, $primary-medium);
+        color: var(--secondary, $secondary);
       }
 
       &.fc-state-active {
-        background: $tertiary;
-        color: $secondary;
+        background: var(--tertiary, $tertiary);
+        color: var(--secondary, $secondary);
       }
       margin: 0.3em 0 0.3em 0.5em;
     }
@@ -81,7 +81,7 @@
     .fc-list-empty,
     .fc-list-heading td,
     .fc-popover .fc-header {
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
     }
 
     .fc-content,
@@ -94,14 +94,14 @@
     td,
     th,
     thead {
-      border-color: $primary-low;
+      border-color: var(--primary-low, $primary-low);
     }
   }
 
   .fc-event,
   .fc-event-dot {
-    color: $secondary;
-    background-color: $tertiary;
+    color: var(--secondary, $secondary);
+    background-color: var(--tertiary, $tertiary);
     border: 1px solid transparent;
 
     .fc-time {
@@ -110,9 +110,9 @@
 
     &.grouped-event {
       background-color: none;
-      background: $secondary;
-      border: 1px solid $primary-low-mid;
-      color: $primary;
+      background: var(--secondary, $secondary);
+      border: 1px solid var(--primary-low-mid, $primary-low-mid);
+      color: var(--primary, $primary);
 
       .emoji {
         margin-right: 0.25em;
@@ -126,7 +126,7 @@
     }
   }
   .fc-list-item-add-to-calendar {
-    color: $tertiary;
+    color: var(--tertiary, $tertiary);
     font-size: $font-down-1;
   }
 }
diff --git a/assets/stylesheets/desktop/discourse-calendar.scss b/assets/stylesheets/desktop/discourse-calendar.scss
index c9d4beaa..430f3933 100644
--- a/assets/stylesheets/desktop/discourse-calendar.scss
+++ b/assets/stylesheets/desktop/discourse-calendar.scss
@@ -4,6 +4,6 @@
     margin-right: 5px;
   }
   .fc-list-item:hover td {
-    background: $highlight-medium;
+    background: var(--highlight-medium, $highlight-medium);
   }
 }