feat: make colors configurable with cookies

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;
 }

src/app/app.component.scss

@@ -28,15 +28,15 @@
 }
 
 #main {
-  background-color: $primary-background-color;
+  background-color: var(--primary-background-color, #{$primary-background-color});
 }
 
 #bottom-edge {
   height: $spacer*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) {

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();
   }
 }

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;

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;

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;
 }

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;
 }

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;
 }

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;
 

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;

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;
 }
 

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;
 }

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;
 }

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;

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;
 

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;

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;
   }
 }

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 {