feat:#47 finished theme update

frontend/public/htwk-blue.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with PhotoLine 24.00 (www.pl32.de) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="627" height="537" viewBox="0 0 627 537" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g transform="matrix(1 0 0 1 0 -71)">
+    <rect id="Quadrat/Rechteck" transform="matrix(0.692624 -0.276299 0.950168 2.381878 -618.56427 -1339.071411)" fill="#004699" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
+    <rect id="Quadrat/Rechteck" transform="matrix(0.697146 -0.278103 0.950168 2.381878 -318.261779 -1354.028198)" fill="#004699" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
+  </g>
+</svg>

frontend/public/primevue-sass-theme/themes/lara/lara-dark/_variables.scss

@@ -56,11 +56,8 @@ $textColor: $shade000 !default;
 $textSecondaryColor: $shade100 !default;
 $borderRadius: 6px !default;
 $transitionDuration: 0.2s !default;
-$formElementTransition: background-color $transitionDuration,
+$formElementTransition: background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration !default;
-    color $transitionDuration, border-color $transitionDuration,
+$actionIconTransition: background-color $transitionDuration, color $transitionDuration, box-shadow $transitionDuration !default;
-    box-shadow $transitionDuration !default;
-$actionIconTransition: background-color $transitionDuration,
-    color $transitionDuration, box-shadow $transitionDuration !default;
 $listItemTransition: box-shadow $transitionDuration !default;
 $primeIconFontSize: 1rem !default;
 $divider: 1px solid $shade600 !default;
@@ -68,7 +65,7 @@ $inlineSpacing: 0.5rem !default; //spacing between inline elements
 $disabledOpacity: 0.4 !default; //opacity of a disabled item
 $maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
 $loadingIconFontSize: 2rem !default;
-$errorColor: #fca5a5 !default;
+$errorColor: map-get($colors, "htwk-rot") !default;
 
 //scale
 $scaleSM: 0.875 !default;

frontend/public/primevue-sass-theme/themes/lara/lara-dark/yellow/theme.scss

@@ -21,6 +21,7 @@ $highlightFocusBg: rgba($primaryColor, 0.24) !default;
   .fc {
     /* FullCalendar 4 */
     /* FullCalendar 5 */
+    --fc-page-bg-color: transparent; /*#071426*/
   }
 
   .fc.fc-unthemed .fc-view-container th {

frontend/public/primevue-sass-theme/themes/lara/lara-light/_variables.scss

@@ -1,16 +1,41 @@
 $colors: (
-    "blue": #3B82F6,
+        "blue": #004699,
-    "green": #22C55E,
+        "green": #00964e,
-    "yellow": #EAB308,
+        "yellow": #ffed00,
-    "cyan": #06B6D4,
+        "cyan": #009ee3,
-    "pink": #EC4899,
+        "pink": #e5007d,
-    "indigo": #6366F1,
+        "indigo": #6366f1,
-    "teal": #14B8A6,
+        "teal": #14b8a6,
-    "orange": #F97316,
+        "orange": #f97316,
-    "bluegray": #64748B,
+        "bluegray": #64748b,
-    "purple": #A855F7,
+        "purple": #a855f7,
-    "red": #FF3D32,
+        "red": #e53009,
-    "primary": $primaryColor
+        "primary": $primaryColor,
+        "primary-24": rgba($primaryColor, 0.24),
+        "htwk-yellow": #ffed00,
+        "htwk-yellow-24": rgba(255, 237, 0, 0.24),
+        "htwk-yellow-16": rgba(255, 237, 0, 0.16),
+        "htwk-yellow-01": rgba(255, 237, 0, 0.1),
+        "htwk-magenta": #e5007d,
+        "htwk-rot": #e53009,
+        "htwk-gruen": #00964e,
+        "htwk-cyan": #009ee3,
+        "htwk-blau": #004699,
+        "htwk-silbergrau": #bec3c6,
+        "htwk-silbergrau-80": #cbd3d1,
+        "htwk-silbergrau-60": #d8dedc,
+        "htwk-silbergrau-40": #e5e9e8,
+        "htwk-grau-140": #1b2022,
+        "htwk-grau-120": #242b2d,
+        "htwk-grau": #2e3639,
+        "htwk-grau-80": #575e60,
+        "htwk-grau-60": #818688,
+        "htwk-grau-40": #abaeaf,
+        "htwk-dunkelblau": #022541,
+        "htwk-dunkelblau-80": #345067,
+        "htwk-dunkelblau-60": #677c8d,
+        "htwk-dunkelblau-40": #99a7b3,
+        "htwk-schwarz": #000000,
 );
 
 //reused color variables
@@ -26,7 +51,7 @@ $shade800:#374151 !default;    //unused
 $shade900:#1f2937 !default;    //unused
 
 //global
-$fontFamily:'Inter var', sans-serif !default;
+$fontFamily:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
 $fontSize:1rem !default;
 $fontWeight:normal !default;
 $textColor:$shade700 !default;
@@ -42,7 +67,7 @@ $inlineSpacing:.5rem !default;
 $disabledOpacity:.6 !default;
 $maskBg:rgba(0, 0, 0, 0.4) !default;
 $loadingIconFontSize:2rem !default;
-$errorColor:#e24c4c !default;
+$errorColor: map-get($colors, "htwk-rot") !default;
 
 //scale
 $scaleSM:0.875 !default;
@@ -155,16 +180,16 @@ $secondaryButtonTextActiveColor:$secondaryButtonTextColor !default;
 $secondaryButtonActiveBorderColor:#334155 !default;
 $secondaryButtonFocusShadow:0 0 0 0.2rem #E2E8F0 !default;
 
-$infoButtonBg:#0ea5e9 !default;
+$infoButtonBg: map-get($colors, "primary") !default;
 $infoButtonTextColor:#ffffff !default;
-$infoButtonBorder:1px solid #0ea5e9 !default;
+$infoButtonBorder:1px solid map-get($colors, "primary") !default;
-$infoButtonHoverBg:#0284c7 !default;
+$infoButtonHoverBg: #0257c7 !default;
 $infoButtonTextHoverColor:$infoButtonTextColor !default;
-$infoButtonHoverBorderColor:#0284c7 !default;
+$infoButtonHoverBorderColor:#rgba(map-get($colors, "primary"), .8) !default;
-$infoButtonActiveBg:#0369a1 !default;
+$infoButtonActiveBg:rgba(map-get($colors, "primary"), .8) !default;
 $infoButtonTextActiveColor:$infoButtonTextColor !default;
-$infoButtonActiveBorderColor:#0369a1 !default;
+$infoButtonActiveBorderColor:rgba(map-get($colors, "primary"), .9) !default;
-$infoButtonFocusShadow:0 0 0 0.2rem #BFDBFE !default;
+$infoButtonFocusShadow:0 0 0 0.2rem rgba(map-get($colors, "primary"), .7) !default;
 
 $successButtonBg:#22C55E !default;
 $successButtonTextColor:#ffffff !default;
@@ -316,7 +341,7 @@ $calendarHeaderBg:$shade000 !default;
 $calendarInlineHeaderBg:$calendarBg !default;
 $calendarHeaderBorder:1px solid $shade300 !default;
 $calendarHeaderTextColor:$shade700 !default;
-$calendarHeaderFontWeight:600 !default;
+$calendarHeaderFontWeight:100 !default;
 $calendarHeaderCellPadding:.5rem !default;
 $calendarMonthYearHeaderHoverTextColor: $primaryColor !default;
 
@@ -358,7 +383,7 @@ $panelHeaderBorderColor:$shade300 !default;
 $panelHeaderBorder:1px solid $shade300 !default;
 $panelHeaderBg:$shade100 !default;
 $panelHeaderTextColor:$shade800 !default;
-$panelHeaderFontWeight:700 !default;
+$panelHeaderFontWeight:100 !default;
 $panelHeaderPadding:1.25rem !default;
 $panelToggleableHeaderPadding:.75rem 1.25rem !default;
 
@@ -445,8 +470,8 @@ $scrollPanelTrackBg:$shade100 !default;
 //card
 $cardBodyPadding:1.25rem !default;
 $cardTitleFontSize:1.5rem !default;
-$cardTitleFontWeight:700 !default;
+$cardTitleFontWeight: 0 !default;
-$cardSubTitleFontWeight:400 !default;
+$cardSubTitleFontWeight:100 !default;
 $cardSubTitleColor:$shade600 !default;
 $cardContentPadding:1.25rem 0 !default;
 $cardFooterPadding:1.25rem 0 0 0 !default;
@@ -485,13 +510,13 @@ $tableHeaderBorder:1px solid $shade300 !default;
 $tableHeaderBorderWidth:1px 0 1px 0 !default;
 $tableHeaderBg:$shade100 !default;
 $tableHeaderTextColor:$shade800 !default;
-$tableHeaderFontWeight:700 !default;
+$tableHeaderFontWeight: 0 !default;
 $tableHeaderPadding:1rem 1rem !default;
 
 $tableHeaderCellPadding:1rem 1rem !default;
 $tableHeaderCellBg:$shade100 !default;
 $tableHeaderCellTextColor:$shade800 !default;
-$tableHeaderCellFontWeight:700 !default;
+$tableHeaderCellFontWeight: 0 !default;
 $tableHeaderCellBorder:1px solid $shade300 !default;
 $tableHeaderCellBorderWidth:0 0 1px 0 !default;
 $tableHeaderCellHoverBg:$shade200 !default;
@@ -516,7 +541,7 @@ $tableBodyCellPadding:1rem 1rem !default;
 $tableFooterCellPadding:1rem 1rem !default;
 $tableFooterCellBg:$shade100 !default;
 $tableFooterCellTextColor:$shade800 !default;
-$tableFooterCellFontWeight:700 !default;
+$tableFooterCellFontWeight: 0 !default;
 $tableFooterCellBorder:1px solid $shade300 !default;
 $tableFooterCellBorderWidth:0 0 1px 0 !default;
 $tableResizerHelperBg:$primaryColor !default;
@@ -525,7 +550,7 @@ $tableFooterBorder:1px solid $shade300 !default;
 $tableFooterBorderWidth:0 0 1px 0 !default;
 $tableFooterBg:$shade100 !default;
 $tableFooterTextColor:$shade800 !default;
-$tableFooterFontWeight:700 !default;
+$tableFooterFontWeight: 0 !default;
 $tableFooterPadding:1rem 1rem !default;
 
 $tableCellContentAlignment:left !default;
@@ -566,7 +591,7 @@ $messagePadding:1.25rem 1.75rem !default;
 $messageBorderWidth:0 0 0 6px !default;
 $messageIconFontSize:1.5rem !default;
 $messageTextFontSize:1rem !default;
-$messageTextFontWeight:500 !default;
+$messageTextFontWeight: 0 !default;
 
 //inline message
 $inlineMessagePadding:$inputPadding !default;
@@ -583,7 +608,7 @@ $toastPadding:1rem !default;
 $toastBorderWidth:0 0 0 6px !default;
 $toastShadow:0 2px 12px 0 rgba(0,0,0,.1) !default;
 $toastOpacity:1 !default;
-$toastTitleFontWeight:700 !default;
+$toastTitleFontWeight: 0 !default;
 $toastDetailMargin:$inlineSpacing 0 0 0 !default;
 
 //severities
@@ -621,7 +646,7 @@ $overlayContainerShadow:0 1px 3px rgba(0,0,0,.3) !default;
 $dialogHeaderBg:$shade000 !default;
 $dialogHeaderBorder:0 none !default;
 $dialogHeaderTextColor:$shade800 !default;
-$dialogHeaderFontWeight:700 !default;
+$dialogHeaderFontWeight: 0 !default;
 $dialogHeaderFontSize:1.25rem !default;
 $dialogHeaderPadding:1.5rem !default;
 $dialogContentPadding:0 1.5rem 2rem 1.5rem !default;
@@ -646,7 +671,7 @@ $stepsItemNumberHeight:2rem !default;
 $stepsItemNumberFontSize:1.143rem !default;
 $stepsItemNumberColor:$shade700 !default;
 $stepsItemNumberBorderRadius:50% !default;
-$stepsItemActiveFontWeight:700 !default;
+$stepsItemActiveFontWeight: 0 !default;
 
 //progressbar, progressspinner
 $progressBarHeight:1.5rem !default;
@@ -856,10 +881,10 @@ $imagePreviewActionIconFontSize:1.5rem !default;
 $imagePreviewActionIconBorderRadius:50% !default;
 
 :root {
-    font-family:'Inter var', sans-serif;
+    font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
     font-feature-settings: "cv02","cv03","cv04","cv11";
     font-variation-settings: normal;
-    --font-family:'Inter var', sans-serif;
+    --font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
     --font-feature-settings: "cv02","cv03","cv04","cv11";
     --surface-a:#{$shade000};
     --surface-b:#{$shade100};

frontend/public/primevue-sass-theme/themes/lara/lara-light/blue/_fonts.scss

@@ -1,16 +0,0 @@
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
-}

frontend/public/primevue-sass-theme/themes/lara/lara-light/blue/theme.scss

@@ -1,7 +1,7 @@
-$primaryColor: #3B82F6 !default;
+$primaryColor: #004699 !default;
-$primaryLightColor: #BFDBFE !default;
+$primaryLightColor: #3276bd !default;
-$primaryDarkColor: #2563eb !default;
+$primaryDarkColor: #002d67 !default;
-$primaryDarkerColor: #1D4ED8 !default;
+$primaryDarkerColor: #022541 !default;
 $primaryTextColor: #ffffff !default;
 
 $highlightBg: #EFF6FF !default;
@@ -11,4 +11,444 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
 @import '../_variables';
 @import './_fonts';
 @import '../../../../theme-base/_components';
-@import '../_extensions';
+@import '../_extensions';
+
+:root {
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 100;
+  }
+
+  .fc {
+    /* FullCalendar 4 */
+    /* FullCalendar 5 */
+    // set the background color of the calendar transparent
+    --fc-page-bg-color: transparent;
+  }
+
+  .fc.fc-unthemed .fc-view-container th {
+    background: $primaryTextColor; /*#071426*/
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .fc.fc-unthemed .fc-view-container td.fc-widget-content {
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .fc.fc-unthemed .fc-view-container td.fc-head-container {
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+  }
+
+  .fc.fc-unthemed .fc-view-container .fc-view {
+    background: $primaryTextColor; /*#071426*/
+  }
+
+  .fc.fc-unthemed .fc-view-container .fc-row {
+    border-right: 1px solid $primaryTextColor; /*#0b213f*/
+  }
+
+  .fc.fc-unthemed .fc-view-container .fc-event {
+    background: map-get($colors, "primary");
+    border: 1px solid map-get($colors, "primary-24");
+    color: $primaryTextColor; /*#1c2127*/
+  }
+
+  .fc.fc-unthemed .fc-view-container .fc-divider {
+    background: $primaryTextColor; /*#071426*/
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button {
+    color: $primaryTextColor; /*#1c2127*/
+    background: map-get($colors, "primary"); /*#93c5fd*/
+    border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
+    font-size: 1rem;
+    transition:
+            background-color 0.2s,
+            color 0.2s,
+            border-color 0.2s,
+            box-shadow 0.2s;
+    border-radius: 6px;
+    display: flex;
+    align-items: center;
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button:enabled:hover {
+    background: map-get($colors, "primary");
+    color: $primaryTextColor; /*#1c2127*/
+    border-color: map-get($colors, "primary-24");
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active {
+    background: map-get($colors, "primary");
+    color: $primaryTextColor; /*#1c2127*/
+    border-color: map-get($colors, "primary-24");
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button:enabled:active:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left {
+    font-family: "PrimeIcons" !important;
+    text-indent: 0;
+    font-size: 1rem;
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-left:before {
+    content: "\e900";
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right {
+    font-family: "PrimeIcons" !important;
+    text-indent: 0;
+    font-size: 1rem;
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button .fc-icon-chevron-right:before {
+    content: "\e901";
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button {
+    background: $primaryTextColor; /*#071426*/
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    color: rgba(255, 255, 255, 0.87);
+    transition:
+            background-color 0.2s,
+            color 0.2s,
+            border-color 0.2s,
+            box-shadow 0.2s;
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:hover,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button.fc-button-active,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button.fc-button-active,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button.fc-button-active {
+    background: map-get($colors, "primary"); /*#93c5fd*/
+    border-color: map-get($colors, "primary"); /*#93c5fd*/
+    color: $primaryTextColor; /*#1c2127*/
+  }
+
+  .fc.fc-unthemed
+  .fc-toolbar
+  .fc-button.fc-dayGridMonth-button.fc-button-active:hover,
+  .fc.fc-unthemed
+  .fc-toolbar
+  .fc-button.fc-timeGridWeek-button.fc-button-active:hover,
+  .fc.fc-unthemed
+  .fc-toolbar
+  .fc-button.fc-timeGridDay-button.fc-button-active:hover {
+    background: map-get($colors, "primary");
+    border-color: map-get($colors, "primary-24");
+    color: $primaryTextColor; /*#1c2127*/
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-dayGridMonth-button:focus,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridWeek-button:focus,
+  .fc.fc-unthemed .fc-toolbar .fc-button.fc-timeGridDay-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
+    z-index: 1;
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button {
+    border-radius: 0;
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:first-child {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+
+  .fc.fc-unthemed .fc-toolbar .fc-button-group .fc-button:last-child {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-scrollgrid {
+    border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
+  }
+
+  .fc.fc-theme-standard .fc-view-harness th {
+    background: $primaryTextColor; /*#071426*/
+    border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    color: rgba(map-get($colors, "htwk-schwarz"), 0.87);
+  }
+
+  .fc.fc-theme-standard .fc-view-harness td {
+    color: rgba(map-get($colors, "htwk-schwarz"), 0.87);
+    border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-view {
+    background: $primaryTextColor; /*#071426*/
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-popover {
+    background: none;
+    border: 0 none;
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-header {
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    padding: 1.25rem;
+    background: $primaryTextColor; /*#071426*/
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .fc.fc-theme-standard
+  .fc-view-harness
+  .fc-popover
+  .fc-popover-header
+  .fc-popover-close {
+    opacity: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    font-family: "PrimeIcons" !important;
+    font-size: 1rem;
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border: 0 none;
+    background: transparent;
+    border-radius: 50%;
+    transition:
+            background-color 0.2s,
+            color 0.2s,
+            box-shadow 0.2s;
+  }
+
+  .fc.fc-theme-standard
+  .fc-view-harness
+  .fc-popover
+  .fc-popover-header
+  .fc-popover-close:before {
+    content: "\e90b";
+  }
+
+  .fc.fc-theme-standard
+  .fc-view-harness
+  .fc-popover
+  .fc-popover-header
+  .fc-popover-close:hover {
+    color: rgba(255, 255, 255, 0.87);
+    border-color: transparent;
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .fc.fc-theme-standard
+  .fc-view-harness
+  .fc-popover
+  .fc-popover-header
+  .fc-popover-close:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-popover .fc-popover-body {
+    padding: 1.25rem;
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    background: $primaryTextColor; /*#071426*/
+    color: rgba(255, 255, 255, 0.87);
+    border-top: 0 none;
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-block-event {
+    color: $primaryTextColor; /*#1c2127*/
+    background: map-get($colors, "primary");
+    border-color: map-get($colors, "primary-24");
+  }
+
+  .fc.fc-theme-standard
+  .fc-view-harness
+  .fc-event.fc-daygrid-block-event
+  .fc-event-main {
+    color: $primaryTextColor; /*#1c2127*/
+  }
+
+  .fc.fc-theme-standard
+  .fc-view-harness
+  .fc-event.fc-daygrid-dot-event
+  .fc-daygrid-event-dot {
+    background: map-get($colors, "primary");
+    border-color: map-get($colors, "primary-24");
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-event.fc-daygrid-dot-event:hover {
+    background: rgba(255, 255, 255, 0.03);
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .fc.fc-theme-standard .fc-view-harness .fc-cell-shaded {
+    background: $primaryTextColor; /*#071426*/
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button {
+    color: $primaryTextColor; /*#1c2127*/
+    background: map-get($colors, "primary"); /*#93c5fd*/
+    border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
+    font-size: 1rem;
+    transition:
+            background-color 0.2s,
+            color 0.2s,
+            border-color 0.2s,
+            box-shadow 0.2s;
+    border-radius: 6px;
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:hover {
+    background: map-get($colors, "primary-24");
+    color: $primaryTextColor; /*#1c2127*/
+    border-color: map-get($colors, "primary-24");
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active {
+    background: map-get($colors, "htwk-grau-60");
+    color: $primaryTextColor; /*#1c2127*/
+    border-color: map-get($colors, "primary-24");
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button:enabled:active:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button:disabled {
+    opacity: 0.4;
+    color: $primaryTextColor; /*#1c2127*/
+    background: map-get($colors, "primary"); /*#93c5fd*/
+    border: 1px solid map-get($colors, "primary"); /*#93c5fd*/
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left {
+    font-family: "PrimeIcons" !important;
+    text-indent: 0;
+    font-size: 1rem;
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-left:before {
+    content: "\e900";
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right {
+    font-family: "PrimeIcons" !important;
+    text-indent: 0;
+    font-size: 1rem;
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button .fc-icon-chevron-right:before {
+    content: "\e901";
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button,
+  .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button,
+  .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button {
+    background: $primaryTextColor; /*#071426*/
+    border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    color: rgba(255, 255, 255, 0.87);
+    transition:
+            background-color 0.2s,
+            color 0.2s,
+            border-color 0.2s,
+            box-shadow 0.2s;
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button.fc-dayGridMonth-button:hover,
+  .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridWeek-button:hover,
+  .fc.fc-theme-standard .fc-toolbar .fc-button.fc-timeGridDay-button:hover {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: map-get($colors, "htwk-grau-140"); /*#0b213f*/
+    color: rgba(255, 255, 255, 0.87);
+  }
+
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-dayGridMonth-button.fc-button-active,
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-timeGridWeek-button.fc-button-active,
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-timeGridDay-button.fc-button-active {
+    background: map-get($colors, "primary"); /*#93c5fd*/
+    border-color: map-get($colors, "primary"); /*#93c5fd*/
+    color: $primaryTextColor; /*#1c2127*/
+  }
+
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-dayGridMonth-button.fc-button-active:hover,
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-timeGridWeek-button.fc-button-active:hover,
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-timeGridDay-button.fc-button-active:hover {
+    background: map-get($colors, "primary");
+    border-color: map-get($colors, "primary-24");
+    color: $primaryTextColor; /*#1c2127*/
+  }
+
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-dayGridMonth-button:not(:disabled):focus,
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-timeGridWeek-button:not(:disabled):focus,
+  .fc.fc-theme-standard
+  .fc-toolbar
+  .fc-button.fc-timeGridDay-button:not(:disabled):focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(map-get($colors, "primary"), 0.5); /*rgba(147, 197, 253, 0.5)*/
+    z-index: 1;
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button {
+    border-radius: 0;
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:first-child {
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+  }
+
+  .fc.fc-theme-standard .fc-toolbar .fc-button-group .fc-button:last-child {
+    border-top-right-radius: 6px;
+    border-bottom-right-radius: 6px;
+  }
+
+  .fc.fc-theme-standard .fc-highlight {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(map-get($colors, "primary"), 0.16); /*rgba(147, 197, 253, 0.16)*/
+  }
+}

frontend/public/themes/lara-dark-blue/theme.css

@@ -632,7 +632,7 @@
     opacity: 0.4;
   }
   .p-error {
-    color: #fca5a5;
+    color: #e53009;
   }
   .p-text-secondary {
     color: rgba(255, 255, 255, 0.6);
@@ -803,7 +803,7 @@
     color: rgba(255, 255, 255, 0.87);
   }
   .p-autocomplete.p-invalid.p-component > .p-inputtext {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-autocomplete-panel {
     background: #2e3639;
@@ -975,7 +975,7 @@
     min-width: 80vw;
   }
   .p-calendar.p-invalid.p-component > .p-inputtext {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
     outline: 0 none;
@@ -1325,7 +1325,7 @@
     border-bottom-right-radius: 6px;
   }
   .p-cascadeselect.p-invalid.p-component {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-cascadeselect-panel {
     background: #2e3639;
@@ -1439,7 +1439,7 @@
     border-color: #ffed00;
   }
   .p-checkbox.p-invalid > .p-checkbox-box {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-checkbox.p-variant-filled .p-checkbox-box {
     background-color: #1b2022;
@@ -1543,7 +1543,7 @@
     margin: 0;
   }
   .p-chips.p-invalid.p-component > .p-inputtext {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-colorpicker-panel .p-colorpicker-color {
     background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
@@ -1698,7 +1698,7 @@
     right: 3rem;
   }
   .p-dropdown.p-invalid.p-component {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-dropdown-panel {
     background: #2e3639;
@@ -2007,7 +2007,7 @@
     width: 100%;
   }
   .p-inputnumber.p-invalid.p-component > .p-inputtext {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-inputnumber.p-variant-filled > .p-inputnumber-input {
     background-color: #1b2022;
@@ -2090,7 +2090,7 @@
     box-shadow: 0 0 0 0.2rem rgba(255, 237, 0, 0.5);
   }
   .p-inputswitch.p-invalid > .p-inputswitch-slider {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-fluid .p-inputtext {
     width: 100%;
@@ -2118,7 +2118,7 @@
     border-color: #ffed00;
   }
   .p-inputtext.p-invalid.p-component {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-inputtext.p-variant-filled {
     background-color: #1b2022;
@@ -2143,7 +2143,7 @@
     transition-duration: 0.2s;
   }
   .p-float-label > .p-invalid + label {
-    color: #fca5a5;
+    color: #e53009;
   }
   .p-icon-field-left > .p-inputtext {
     padding-left: 2.5rem;
@@ -2308,7 +2308,7 @@
     border-color: #ffed00;
   }
   .p-listbox.p-invalid {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-multiselect {
     display: inline-flex;
@@ -2448,7 +2448,7 @@
     border-bottom-right-radius: 6px;
   }
   .p-multiselect.p-invalid.p-component {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-inputwrapper-filled.p-multiselect.p-multiselect-chip .p-multiselect-label {
     padding: 0.375rem 0.75rem;
@@ -2566,7 +2566,7 @@
     display: none;
   }
   .p-password.p-invalid.p-component > .p-inputtext {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-password-panel {
     padding: 1.25rem;
@@ -2670,7 +2670,7 @@
     border-color: #ffed00;
   }
   .p-radiobutton.p-invalid > .p-radiobutton-box {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-radiobutton.p-variant-filled .p-radiobutton-box {
     background-color: #1b2022;
@@ -2780,7 +2780,7 @@
     color: #030712;
   }
   .p-selectbutton.p-invalid > .p-button {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-slider {
     position: relative;
@@ -2949,7 +2949,7 @@
     border-bottom-right-radius: 6px;
   }
   .p-treeselect.p-invalid.p-component {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-inputwrapper-filled.p-treeselect.p-treeselect-chip .p-treeselect-label {
     padding: 0.375rem 0.75rem;
@@ -3050,7 +3050,7 @@
     border-color: #ffed00;
   }
   .p-togglebutton.p-invalid > .p-button {
-    border-color: #fca5a5;
+    border-color: #e53009;
   }
   .p-button {
     display: inline-flex;
@@ -10108,6 +10108,7 @@
 :root .fc {
   /* FullCalendar 4 */
   /* FullCalendar 5 */
+  --fc-page-bg-color: transparent; /*#071426*/
 }
 :root .fc.fc-unthemed .fc-view-container th {
   background: #2e3639; /*#071426*/

frontend/src/components/DarkModeSwitcher.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { usePrimeVue } from "primevue/config";
 
 const PrimeVue = usePrimeVue();
 
+const emit = defineEmits(["dark-mode-toggled"]);
+
 const isDark = ref(true);
 const darkTheme = ref("lara-dark-blue"),
   lightTheme = ref("lara-light-blue");
@@ -18,19 +20,22 @@ function setTheme(shouldBeDark: boolean) {
   const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
     oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
   PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
+  emit("dark-mode-toggled", isDark.value);
 }
 
-// set theme matching browser preference
+onMounted(() => {
-setTheme(
+  // set theme matching browser preference
-  window.matchMedia &&
+  setTheme(
+    window.matchMedia &&
     window.matchMedia("(prefers-color-scheme: dark)").matches,
-);
+  );
 
-window
+  window
-  .matchMedia("(prefers-color-scheme: dark)")
+    .matchMedia("(prefers-color-scheme: dark)")
-  .addEventListener("change", (e) => {
+    .addEventListener("change", (e) => {
-    setTheme(e.matches);
+      setTheme(e.matches);
-  });
+    });
+});
 </script>
 
 <template>
@@ -40,7 +45,7 @@ window
     class="p-button-rounded w-full md:w-auto"
     style="margin-right: 1rem"
     :severity="isDark ? 'warning' : 'info'"
-    @click="toggleTheme"
+    @click="toggleTheme();"
   >
     <i v-if="isDark" class="pi pi-sun"></i>
     <i v-else class="pi pi-moon"></i>

frontend/src/components/MenuBar.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LocaleSwitcher from "./LocaleSwitcher.vue";
 import DarkModeSwitcher from "./DarkModeSwitcher.vue";
 const { t } = useI18n({ useScope: "global" });
 
+const isDark = ref(true);
+
 const items = computed(() => [
   {
     label: t("createCalendar"),
@@ -49,6 +51,13 @@ const items = computed(() => [
     url: "https://www.htwk-leipzig.de/hochschule/kontakt/datenschutzerklaerung/",
   },
 ]);
+
+function handleDarkModeToggled(isDarkVar: boolean) {
+  // Do something with isDark value
+  // For example, update the root isDark value
+  // Assuming the root component has an isDark ref
+  isDark.value = isDarkVar;
+}
 </script>
 
 <template>
@@ -56,7 +65,8 @@ const items = computed(() => [
     <template #start>
       <router-link v-slot="{ navigate }" :to="`/`" custom>
         <Button severity="secondary" text class="p-0 mx-2" @click="navigate">
-          <img width="50" height="50" src="../../public/htwk.svg" alt="Logo" />
+          <img v-if="isDark" width="50" height="50" src="../../public/htwk.svg" alt="Logo" />
+          <img v-else width="50" height="50" src="../../public/htwk-blue.svg" alt="Logo" />
         </Button>
       </router-link>
     </template>
@@ -96,7 +106,7 @@ const items = computed(() => [
     </template>
     <template #end>
       <div class="flex align-items-stretch justify-content-center">
-        <DarkModeSwitcher></DarkModeSwitcher>
+        <DarkModeSwitcher @dark-mode-toggled="handleDarkModeToggled"></DarkModeSwitcher>
         <LocaleSwitcher></LocaleSwitcher>
       </div>
     </template>

frontend/src/components/RoomOccupation.vue

@@ -169,7 +169,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
           id: event.id.toString(),
           start: event.start,
           end: event.end,
-          color: event.showFree ? "var(--green-800)" : "var(--primary-color)",
+          color: event.showFree ? "var(--htwk-gruen-500)" : "var(--primary-color)",
           textColor: event.showFree
             ? "var(--green-50)"
             : "var(--primary-color-text)",