diff --git a/src/app/admin-dashboard/admin-dashboard.component.scss b/src/app/admin-dashboard/admin-dashboard.component.scss
index d9cce1dd..bd25409a 100644
--- a/src/app/admin-dashboard/admin-dashboard.component.scss
+++ b/src/app/admin-dashboard/admin-dashboard.component.scss
@@ -1,7 +1,7 @@
 @import "src/default";
 
 span {
-  color: $primary;
+  color: var(--primary, #{$primary});
   text-decoration: underline;
   cursor: pointer;
 }
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 97b04351..337a393e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -28,7 +28,7 @@
 }
 
 #main {
-  background-color: $primary-background-color;
+  background-color: var(--primary-background-color, #{$primary-background-color});
 }
 
 #bottom-edge {
@@ -36,7 +36,7 @@
   min-height: $spacer*7;
   max-height: $spacer*7;
   margin-bottom: $spacer;
-  background: linear-gradient(175deg, $primary-background-color 49.5%, transparent 50.5%) no-repeat bottom;
+  background: linear-gradient(175deg, var(--primary-background-color, #{$primary-background-color}) 49.5%, transparent 50.5%) no-repeat bottom;
 }
 
 @include media-breakpoint-up(lg) {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8b9c2ac1..71486c23 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -6,6 +6,7 @@ import {Title} from '@angular/platform-browser';
 import {LocalStorageService} from './shared/services/data-service/local-storage.service';
 import {LocaleService} from './shared/services/locale/locale.service';
 import {NullableUtils} from "./shared/utils";
+import {CookieService} from "./shared/services/cookie.service";
 
 @Component({
   selector: 'app-root',
@@ -23,6 +24,7 @@ export class AppComponent implements OnInit {
     private logger: Logger,
     private titleService: Title,
     private localStorageService: LocalStorageService,
+    private cookieService: CookieService,
   ) {
   }
 
@@ -40,5 +42,7 @@ export class AppComponent implements OnInit {
           this.connectionError = true;
         }
       });
+
+    this.cookieService.replaceCSSColorsFromCookies();
   }
 }
diff --git a/src/app/create-suggested-dates/create-suggested-dates.component.scss b/src/app/create-suggested-dates/create-suggested-dates.component.scss
index 2f2005fb..dee3f35d 100644
--- a/src/app/create-suggested-dates/create-suggested-dates.component.scss
+++ b/src/app/create-suggested-dates/create-suggested-dates.component.scss
@@ -50,14 +50,14 @@ form {
 }
 
 .section-container .input-group .form-control {
-  border: 1px solid $medium-gray !important;
+  border: 1px solid var(--medium-gray, #{$medium-gray}) !important;
   border-radius: 0.5em !important;
   border-top-left-radius: 0 !important;
   border-bottom-left-radius: 0 !important;
 }
 
 .btn-with-image.btn-add-suggested-date, .btn-with-image.btn-suggested-date-end-at-different-day {
-  color: $primary;
+  color: var(--primary, #{$primary});;
   background-size: $height-icon * 0.8 $width-icon * 0.8;
   @include media-breakpoint-up(lg) {
     background-size: $height-icon $width-icon;
@@ -92,7 +92,7 @@ form {
   }
 }
 
-$input-background-color: $light-gray;
+$input-background-color: var(--light-gray, #{$light-gray});
 
 .input-group-prepend {
   background-color: $input-background-color !important;
@@ -190,7 +190,7 @@ input {
   //noinspection CssUnusedSymbol
 .suggested-date-timepicker-start button.btn-timepicker:active {
   background-origin: border-box;
-  color: $primary;
+  color: var(--primary, #{$primary});
   font-weight: bold;
   border-radius: $border-radius;
   border: 1px solid $border-color-input;
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index 309c6060..9b817ffa 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -14,7 +14,7 @@ label[for="title"] {
 #btn-submit {
   display: flex;
   color: $btn-text;
-  background: $secondary;
+  background: var(--secondary, #{$secondary});
   background-origin: content-box;
   background-size: $form-icon-width * 0.6 $form-icon-height * 0.6;
   align-items: center;
diff --git a/src/app/juristic/imprint/imprint.component.scss b/src/app/juristic/imprint/imprint.component.scss
index 7898d6bd..c84bab39 100644
--- a/src/app/juristic/imprint/imprint.component.scss
+++ b/src/app/juristic/imprint/imprint.component.scss
@@ -42,7 +42,7 @@
 }
 
 .content h1 > a {
-  color: $primary;
+  color: var(--primary, #{$primary});
   display: inline;
   text-align: center;
 }
diff --git a/src/app/juristic/privacy/privacy.component.scss b/src/app/juristic/privacy/privacy.component.scss
index e6d01502..33f8bcd5 100644
--- a/src/app/juristic/privacy/privacy.component.scss
+++ b/src/app/juristic/privacy/privacy.component.scss
@@ -24,7 +24,7 @@ content h1 {
 }
 
 content h1 > a {
-  color: $primary;
+  color: var(--primary, #{$primary});
   display: inline;
   text-align: center;
 }
diff --git a/src/app/juristic/terms-of-service/terms-of-service.component.scss b/src/app/juristic/terms-of-service/terms-of-service.component.scss
index 1304dd1e..17836a5f 100644
--- a/src/app/juristic/terms-of-service/terms-of-service.component.scss
+++ b/src/app/juristic/terms-of-service/terms-of-service.component.scss
@@ -24,7 +24,7 @@ content h1 {
 }
 
 content h1 > a {
-  color: $primary;
+  color: var(--primary, #{$primary});
   display: inline;
   text-align: center;
 }
diff --git a/src/app/links/links.component.scss b/src/app/links/links.component.scss
index c16cd0e3..31c61d7a 100644
--- a/src/app/links/links.component.scss
+++ b/src/app/links/links.component.scss
@@ -26,7 +26,7 @@ $icon-height: 30px;
 .link-container {
   border: 1px solid $circle-tag-border-color;
   border-radius: 0.5rem;
-  background-color: $light-gray;
+  background-color: var(--light-gray, #{$light-gray});
 }
 
 .btn {
@@ -42,13 +42,13 @@ $icon-height: 30px;
 }
 
 .btn-transparent:hover {
-  background-color: $medium-gray;
-  border-color: $medium-gray;
+  background-color: var(--medium-gray, #{$medium-gray});
+  border-color: var(--medium-gray, #{$medium-gray});
 }
 
 a.link-with-image {
   display: flex;
-  color: $primary;
+  color: var(--primary, #{$primary});
   padding-left: 6px;
   border: 0;
 
diff --git a/src/app/password/password.component.scss b/src/app/password/password.component.scss
index 23ba9b37..35931625 100644
--- a/src/app/password/password.component.scss
+++ b/src/app/password/password.component.scss
@@ -11,17 +11,17 @@
 .input-group button {
   background-color: white;
   border-radius: 0 .5rem .5rem 0;
-  border-color: $primary-background-color !important;
+  border-color: var(--primary-background-color, #{$primary-background-color}) !important;
 
   &:focus {
-    border-color: $s-h-blue !important;
+    border-color: var(--focus-border, #{$focus-border}) !important;
   }
 }
 
 .btn-submit {
   display: flex;
   color: $btn-text;
-  background: $secondary;
+  background: var(--secondary, #{$secondary});
   background-origin: content-box;
   background-size: $form-icon-width * 0.6 $form-icon-height * 0.6;
   align-items: center;
diff --git a/src/app/poll/mobile-poll-table.component.scss b/src/app/poll/mobile-poll-table.component.scss
index 9197f72f..62eee576 100644
--- a/src/app/poll/mobile-poll-table.component.scss
+++ b/src/app/poll/mobile-poll-table.component.scss
@@ -38,7 +38,7 @@ select {
 }
 
 .toolbar {
-  background-color: $s-h-blue-15;
+  background-color: var(--toolbar-background-color, #{$toolbar-background-color}) ;
   min-height: 50px;
 }
 
diff --git a/src/app/poll/poll.component.scss b/src/app/poll/poll.component.scss
index 5d3c520f..9dec029a 100644
--- a/src/app/poll/poll.component.scss
+++ b/src/app/poll/poll.component.scss
@@ -95,7 +95,7 @@ tfoot tr:last-child td {
 }
 
 .toolbar {
-  background-color: $toolbar-background-color;
+  background-color: var(--toolbar-background-color, #{$toolbar-background-color});
 }
 
 .divider {
@@ -136,8 +136,8 @@ button.btn-trash {
   @include focus-outline;
 
   :hover {
-    background-color: $medium-gray;
-    border-color: $medium-gray;
+    background-color: var(--medium-gray, #{$medium-gray});
+    border-color: var(--medium-gray, #{$medium-gray});
   }
 }
 
@@ -276,13 +276,13 @@ button.btn-with-image {
 
 $poll-data-cell-invalid-message-min-height: 24px;
 .poll-add-user-row, .poll-edit-user-row, .table-hover tbody tr.poll-add-user-row:hover {
-  background-color: $toolbar-background-color !important;
+  background-color: var(--toolbar-background-color, #{$toolbar-background-color}) !important;
 
   .poll-data-cell {
     width: 350px;
 
     &.name {
-      background: $toolbar-background-color !important;
+      background: var(--toolbar-background-color, #{$toolbar-background-color}) !important;
     }
 
     .invalid-message {
@@ -311,9 +311,9 @@ $poll-data-cell-invalid-message-min-height: 24px;
     }
 
     .form-control {
-      color: $primary;
-      border-color: $medium-gray;
-      background-color: $light-gray;
+      color: var(--primary, #{$primary});
+      border-color: var(--medium-gray, #{$medium-gray});
+      background-color: var(--light-gray, #{$light-gray});
     }
 
   }
@@ -342,8 +342,8 @@ $poll-data-cell-invalid-message-min-height: 24px;
   @include media-breakpoint-up(lg) {
     font-size: $font-size-medium;
   }
-  color: $danger;
-  border: 2px solid $danger;
+  color: var(--danger, #{$danger});
+  border: 2px solid var(--danger, #{$danger});
   background-color: transparent;
   border-radius: 0;
 }
diff --git a/src/app/shared/components/admin-info/admin-info.component.scss b/src/app/shared/components/admin-info/admin-info.component.scss
index 2d9efef3..42a419b4 100644
--- a/src/app/shared/components/admin-info/admin-info.component.scss
+++ b/src/app/shared/components/admin-info/admin-info.component.scss
@@ -1,6 +1,6 @@
 @import "src/default";
 
 * {
-  color: $danger;
+  color: var(--danger, #{$danger});
   font-weight: $font-weight-normal;
 }
diff --git a/src/app/shared/components/appointment-summary/appointment-summary.component.scss b/src/app/shared/components/appointment-summary/appointment-summary.component.scss
index a5121e06..22128808 100644
--- a/src/app/shared/components/appointment-summary/appointment-summary.component.scss
+++ b/src/app/shared/components/appointment-summary/appointment-summary.component.scss
@@ -1,20 +1,11 @@
 @import "src/default";
 @import 'bootstrap/scss/mixins';
 
-#url {
-  color: $primary;
-}
-
-#name {
-  color: $primary;
-}
-
-#title {
-  color: $primary;
-}
-
+#url,
+#name,
+#title,
 #location {
-  color: $primary;
+  color: var(--primary, #{$primary});
 }
 
 img.icon {
@@ -23,7 +14,7 @@ img.icon {
 }
 
 .header {
-  color: $primary;
+  color: var(--primary, #{$primary});
   font-size: $font-size-small-mobile;
   @include media-breakpoint-up(lg) {
     font-size: $font-size-small;
@@ -50,7 +41,7 @@ img.icon {
 }
 
 #description {
-  color: $primary;
+  color: var(--primary, #{$primary});
   position: relative;
   text-align: justify;
   padding-right: 1em;
diff --git a/src/app/shared/components/combobox/combobox.component.scss b/src/app/shared/components/combobox/combobox.component.scss
index 36f70dcf..b68ced46 100644
--- a/src/app/shared/components/combobox/combobox.component.scss
+++ b/src/app/shared/components/combobox/combobox.component.scss
@@ -46,7 +46,7 @@
   overflow-y: auto;
 
   background-color: white;
-  border: 1px solid $dark-gray;
+  border: 1px solid var(--dark-gray, #{$dark-gray});
   border-radius: .5rem;
 }
 
@@ -58,13 +58,13 @@
   }
 
   &.option-current {
-    outline: lighten($primary, 10%) solid 0.15rem !important;
+    outline: var(--primary-lighter-10) solid 0.15rem !important;
     outline-offset: -.15rem;
     border-radius: .5rem;
   }
 
   &[aria-selected="true"] {
-    background-color: $light-gray;
+    background-color: var(--light-gray, #{$light-gray});
     padding-right: 30px;
     position: relative;
 
diff --git a/src/app/shared/components/dates-overview/dates-overview.component.scss b/src/app/shared/components/dates-overview/dates-overview.component.scss
index f8a3ae21..f8f5f5df 100644
--- a/src/app/shared/components/dates-overview/dates-overview.component.scss
+++ b/src/app/shared/components/dates-overview/dates-overview.component.scss
@@ -1,7 +1,7 @@
 @import "src/default.scss";
 
 .date-time-overview table {
-  color: $primary;
+  color: var(--primary, #{$primary});
 
   th {
     min-width: $suggested-date-desktop-min-width;
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss
index 446fb6ea..7615f37b 100644
--- a/src/app/shared/components/footer/footer.component.scss
+++ b/src/app/shared/components/footer/footer.component.scss
@@ -2,14 +2,14 @@
 @import 'bootstrap/scss/mixins';
 
 #email {
-  color: $secondary;
+  color: var(--secondary, #{$secondary});
 }
 
 #contact {
   display: block;
   text-align: center;
   width: 100%;
-  color: $footer-text-color;
+  color: var(--footer-text-color, #{$footer-text-color});
   margin-bottom: 8px;
 }
 
@@ -26,11 +26,11 @@
 }
 
 #contact > a {
-  color: $secondary;
+  color: var(--secondary, #{$secondary});
 }
 
 #contact > a:hover {
-  color: $secondary;
+  color: var(--secondary, #{$secondary});
   text-decoration: underline;
 }
 
@@ -39,12 +39,12 @@
   text-align: center;
   width: 100%;
   padding: 0 4px 0 4px;
-  color: $footer-text-color;
+  color: var(--footer-text-color, #{$footer-text-color});
   margin-bottom: 8px;
   font-size: $font-size-small-mobile;
 
   a {
-    color: $footer-text-color;
+    color: var(--footer-text-color, #{$footer-text-color});
   }
 
   @include media-breakpoint-up(lg) {
@@ -82,7 +82,7 @@
     @include media-breakpoint-up(lg) {
       font-size: $font-size-small;
     }
-    color: $dark-gray;
+    color: var(--dark-gray, #{$dark-gray});
     margin: 0 4px 0 4px;
   }
 }
diff --git a/src/app/shared/components/mediaelement-player/mediaelement-player.component.scss b/src/app/shared/components/mediaelement-player/mediaelement-player.component.scss
index 8c1f9590..1d4e97e2 100644
--- a/src/app/shared/components/mediaelement-player/mediaelement-player.component.scss
+++ b/src/app/shared/components/mediaelement-player/mediaelement-player.component.scss
@@ -74,7 +74,7 @@
 
   // better contrast
   .mejs__controls:not([style*="display: none"]) {
-    background: $light-gray;
+    background: var(--light-gray, #{$light-gray});
   }
 
   svg {
diff --git a/src/app/shared/components/stepper/stepper.component.scss b/src/app/shared/components/stepper/stepper.component.scss
index e4f1484f..a990e8d2 100644
--- a/src/app/shared/components/stepper/stepper.component.scss
+++ b/src/app/shared/components/stepper/stepper.component.scss
@@ -8,20 +8,20 @@
     width: 20px;
     height: 20px;
     border-radius: 20px;
-    border: 3px solid $dark-gray;
-    background-color: $medium-gray;
+    border: 3px solid var(--dark-gray, #{$dark-gray});
+    background-color: var(--medium-gray, #{$medium-gray});
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 2px 5px 0 rgba(0, 0, 0, 0.18);
   }
 
   .circle-active {
-    border-color: $dark-gray;
-    background-color: $secondary;
+    border-color: var(--dark-gray, #{$dark-gray});
+    background-color: var(--secondary, #{$secondary});
   }
 
   .line {
     width: 100%;
     height: 2px;
-    background: $stepperLine;
+    background: var(--medium-gray, #{$medium-gray});
     flex: 1;
   }
 }
diff --git a/src/app/shared/components/suggested-date/suggested-date.component.scss b/src/app/shared/components/suggested-date/suggested-date.component.scss
index efb0296b..3fa65b1b 100644
--- a/src/app/shared/components/suggested-date/suggested-date.component.scss
+++ b/src/app/shared/components/suggested-date/suggested-date.component.scss
@@ -17,7 +17,7 @@ div {
 
 .date-time-divider {
   height: 30px;
-  border-right: 1px solid $dark-gray;
+  border-right: 1px solid var(--dark-gray, #{$dark-gray});
 }
 
 .hyphen {
diff --git a/src/app/shared/components/tos/tos.component.scss b/src/app/shared/components/tos/tos.component.scss
index da72cfe2..ee8d928a 100644
--- a/src/app/shared/components/tos/tos.component.scss
+++ b/src/app/shared/components/tos/tos.component.scss
@@ -3,7 +3,7 @@
 
 a {
   text-decoration: underline;
-  color: $primary;
+  color: var(--primary, #{$primary});
 }
 
 h2,
diff --git a/src/app/shared/services/cookie.service.ts b/src/app/shared/services/cookie.service.ts
new file mode 100644
index 00000000..c581ea16
--- /dev/null
+++ b/src/app/shared/services/cookie.service.ts
@@ -0,0 +1,53 @@
+import {Injectable} from "@angular/core";
+import {Logger} from "./logging";
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class CookieService {
+  colors: string[] = [
+    'primary',
+    'primary-lighter-10',
+    'secondary',
+    'light-gray',
+    'medium-gray',
+    'dark-gray',
+    'focus-border',
+    'toolbar-background-color',
+    'primary-background-color',
+    'danger',
+    'bootstrap-form-control-color',
+    // Inherited Colors - see colors.scss
+    'footer-text-color',
+    'border-color-input',
+    'border-color-divider-icon-input',
+  ];
+
+  constructor(private logger: Logger) {
+  }
+
+  replaceCSSColorsFromCookies(): void {
+    this.logger.info('replaceCSSColorsFromCookies()');
+
+    this.colors.forEach((color) => {
+      this.logger.debug('Looking for: ', color);
+
+      const colorValue = this.getCookie(color);
+      if (colorValue) {
+        this.logger.debug('Cookie found, value is: ', colorValue);
+        document.documentElement.style.setProperty(`--${color}`, colorValue);
+      }
+    });
+  }
+
+  private getCookie(name: string): string | null {
+    // 1. cookie string trennen "foo=bar; variable=value; etc=123"
+    // 2. value für regex escapen
+    // 3. value auslesen
+    const matches = document.cookie.match(new RegExp(
+      '(?:^|; )' + name.replace(/([$?*|{}\[\]\\\/+^])/g, '\\$1') + '=([^;]*)'
+    ));
+    return matches ? decodeURIComponent(matches[1]) : null;
+  }
+}
diff --git a/src/colors.scss b/src/colors.scss
new file mode 100644
index 00000000..13d6ce37
--- /dev/null
+++ b/src/colors.scss
@@ -0,0 +1,31 @@
+@import "default";
+
+$colors: (
+  primary: $primary,
+  primary-lighter-10: #004691,
+  secondary: $secondary,
+  light-gray: $light-gray,
+  medium-gray: $medium-gray,
+  dark-gray: $dark-gray,
+  focus-border: $primary,
+  toolbar-background-color: $toolbar-background-color,
+  primary-background-color: $primary-background-color,
+  danger: $danger,
+  bootstrap-form-control-color: $bootstrap-form-control-color
+);
+
+$inheritingColors: (
+  footer-text-color: var(--secondary, #{$secondary}),
+  border-color-input: var(--medium-gray, #{$medium-gray}),
+  border-color-divider-icon-input: var(--medium-gray, #{$medium-gray})
+);
+
+:root {
+  @each $key, $value in $colors {
+    --#{$key}: #{$value};
+  }
+
+  @each $key, $value in $inheritingColors {
+    --#{$key}: #{$value};
+  }
+}
diff --git a/src/default.scss b/src/default.scss
index e7d8a3a2..500c622d 100644
--- a/src/default.scss
+++ b/src/default.scss
@@ -4,13 +4,9 @@ $secondary: #b3003e;
 $light-gray: #F5F6F7;
 $medium-gray: #909498;
 $dark-gray: #595959;
-$s-h-blue: $primary;
-$s-h-blue-50: #8497af;
-$s-h-blue-15: #d9dfe7;
-$s-h-light-blue: #c9daef;
+$focus-border: $primary;
 $input-focus-border-color: $primary;
 $danger: $secondary;
-$stepperLine: $medium-gray;
 $btn-text: #ffffff;
 $border-radius: 0.5rem;
 $border-radius-lg: 1rem;
@@ -23,12 +19,11 @@ $input-invalid-color: #88031a;
 $divider-background-color: #f5f6f7;
 $divider-border-color: #8c8c8c;
 $poll-data-cell-border-left-right-color: #d9d9d9;
-$poll-data-cell-background-color: $s-h-blue-15;
 $poll-row-border-color: #d9d9d9;
 $circle-tag-border-color: $poll-row-border-color;
 $theme-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 2px 5px 0 rgba(0, 0, 0, 0.18);
-$primary-background-color: $s-h-light-blue;
-$toolbar-background-color: $s-h-blue-15;
+$primary-background-color: #c9daef;
+$toolbar-background-color: #d9dfe7;
 $form-icon-width: 1.8rem;
 $form-icon-height: 1.8rem;
 $form-status-icon-width: 30px;
@@ -62,18 +57,10 @@ $font-weight-x-bold: 900;
 $headings-font-weight: $font-weight-normal;
 $btn-font-weight: $font-weight-normal;
 $btn-box-shadow: $theme-shadow;
-$link-color: $primary;
 $label-margin-bottom: 0;
 $footer-text-color: $secondary;
 $spacer: 1rem;
 
-/** Bootstrap Checkbox **/
-$form-check-input-border:                 1px solid $medium-gray;
-$form-check-input-checked-bg-color:       #ffffff;
-$form-check-input-checked-border-color:   $medium-gray;
-$form-check-input-checked-color:          $primary;
-$form-check-label-color:                  $primary;
-
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
@@ -101,6 +88,6 @@ $container-max-widths: (
   outline: none;
 
   &:focus {
-    outline: lighten($primary, 10%) solid 0.25rem !important;
+    outline: var(--primary-lighter-10) solid 0.25rem !important;
   }
 }
diff --git a/src/styles.scss b/src/styles.scss
index d0ede0cf..0173e47c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,5 @@
 @import "default";
+@import "colors";
 @import "bootstrap/scss/functions";
 @import 'bootstrap/scss/bootstrap';
 @import 'bootstrap/scss/mixins';
@@ -20,7 +21,7 @@ body {
 }
 
 h1 {
-  color: $primary !important;
+  color: var(--primary, #{$primary}) !important;
   font-weight: $font-weight-bold !important;
   font-size: $font-size-large-mobile !important;
   @include media-breakpoint-up(sm) {
@@ -34,7 +35,7 @@ h1 {
 }
 
 h2 {
-  color: $primary !important;
+  color: var(--primary, #{$primary}) !important;
   font-size: $font-size-large-mobile !important;
   @include media-breakpoint-up(lg) {
     font-size: $font-size-medium !important;
@@ -43,7 +44,7 @@ h2 {
 }
 
 h3 {
-  color: $primary !important;
+  color: var(--primary, #{$primary}) !important;
   font-size: $font-size-medium-mobile !important;
   @include media-breakpoint-up(lg) {
     font-size: $font-size-medium !important;
@@ -51,7 +52,7 @@ h3 {
 }
 
 label {
-  color: $primary;
+  color: var(--primary, #{$primary});
   font-size: $font-size-small-mobile;
   @include media-breakpoint-up(lg) {
     font-size: $font-size-small;
@@ -169,7 +170,7 @@ a,
 .btn-secondary {
   &:focus {
     box-shadow: none !important;
-    outline: .25rem solid $primary !important;
+    outline: .25rem solid var(--primary, #{$primary}) !important;
     outline-offset: .25rem;
   }
 }
@@ -178,7 +179,7 @@ a,
   &:hover,
   &:active,
   &:focus {
-    background-color: $secondary !important;
+    background-color: var(--secondary, #{$secondary}) !important;
   }
 }
 
@@ -196,13 +197,13 @@ a,
   .form-control {
     border: none !important;
     border-radius: unset !important;
-    border-bottom: 1px solid $medium-gray !important;
+    border-bottom: 1px solid var(--medium-gray, #{$medium-gray}) !important;
     margin-bottom: 0.5rem;
     padding: 0 !important;
   }
 
   .form-control:focus {
-    border-bottom-color: $s-h-blue !important;
+    border-bottom-color: var(--focus-border, #{$focus-border}) !important;
     border-width: 1px !important;
   }
 
@@ -341,7 +342,7 @@ a,
 }
 
 .dropdown-menu {
-  color: $primary;
+  color: var(--primary, #{$primary});
 }
 
 .bootstrap-datetimepicker-widget {
@@ -351,11 +352,11 @@ a,
   }
 
   table td.active, table td.active:hover, table td span.active {
-    background-color: $secondary;
+    background-color: var(--secondary, #{$secondary});
   }
 
   table td.today:before {
-    border-bottom-color: $secondary;
+    border-bottom-color: var(--secondary, #{$secondary});
   }
 }
 
@@ -367,7 +368,7 @@ a,
     text-decoration: underline;
 
     span {
-      text-decoration: $primary;
+      text-decoration: var(--primary, #{$primary});
     }
   }
 
@@ -487,7 +488,7 @@ a,
 }
 
 .font-medium {
-  color: $primary;
+  color: var(--primary, #{$primary});
   font-size: $font-size-medium-mobile;
   @include media-breakpoint-up(lg) {
     font-size: $font-size-medium;
@@ -502,10 +503,10 @@ a,
 }
 
 .text-bold {
-  color: $primary;
+  color: var(--primary, #{$primary});
   font-weight: $font-weight-bold !important;
 }
 
 .text-dark-gray {
-  color: $dark-gray
+  color: var(--dark-gray, #{$dark-gray})
 }