diff --git a/application/controllers/api/frontend/v1/Stundenplan.php b/application/controllers/api/frontend/v1/Stundenplan.php
index 84c7933ad..815631d60 100644
--- a/application/controllers/api/frontend/v1/Stundenplan.php
+++ b/application/controllers/api/frontend/v1/Stundenplan.php
@@ -172,6 +172,7 @@ class Stundenplan extends FHCAPI_Controller
      */
 	public function getRoomplan()
 	{
+		$this->load->library('StundenplanLib');
         // form validation
         $this->load->library('form_validation');
         $this->form_validation->set_data($_GET);
@@ -188,8 +189,7 @@ class Stundenplan extends FHCAPI_Controller
 		$roomplan_data = $this->StundenplanModel->stundenplanGruppierung($this->StundenplanModel->getRoomQuery($ort_kurzbz, $start_date, $end_date));
 
         $roomplan_data = $this->getDataOrTerminateWithError($roomplan_data);
-
-		$this->expand_object_information($roomplan_data);
+		$this->stundenplanlib->expand_object_information($roomplan_data);
 
 		$this->terminateWithSuccess($roomplan_data);
 
@@ -198,6 +198,7 @@ class Stundenplan extends FHCAPI_Controller
 	// gets the reservierungen of a room if the ort_kurzbz parameter is supplied otherwise gets the reservierungen of the stundenplan of a student
     public function Reservierungen($ort_kurzbz = null)
 	{
+		$this->load->library('StundenplanLib');
 		//form validation
 		$this->load->library('form_validation');
 		$this->form_validation->set_data($_GET);
@@ -211,7 +212,6 @@ class Stundenplan extends FHCAPI_Controller
         $start_date = $this->input->get('start_date', TRUE);
         $end_date = $this->input->get('end_date', TRUE);
 
-		$this->load->library('StundenplanLib');
 		$result = $this->stundenplanlib->getReservierungen($start_date,$end_date,$ort_kurzbz);
 		$result = $this->getDataOrTerminateWithError($result);	
 		$this->terminateWithSuccess($result);
diff --git a/application/libraries/StundenplanLib.php b/application/libraries/StundenplanLib.php
index 5a741e10c..e0691ecab 100644
--- a/application/libraries/StundenplanLib.php
+++ b/application/libraries/StundenplanLib.php
@@ -144,8 +144,8 @@ class StundenplanLib{
 	}
 
 
-	private function expand_object_information($data){
-
+	public function expand_object_information($data){
+		$this->_ci =& get_instance();
 		foreach ($data as $item)
 		{
 
diff --git a/application/views/Cis/Login.php b/application/views/Cis/Login.php
index 68490e67e..90f78f123 100644
--- a/application/views/Cis/Login.php
+++ b/application/views/Cis/Login.php
@@ -2,7 +2,8 @@
 	$includesArray = array(
 		'title' => 'FH-Complete',
 		'bootstrap5' => true,
-		'fontawesome6' => true
+		'fontawesome6' => true,
+		'customJSs' => 'public/js/helpers/ColorThemeSetting.js'
 	);
 
 	$this->load->view('templates/FHC-Header', $includesArray);
diff --git a/application/views/lehre/anrechnung/requestAnrechnungImportant.php b/application/views/lehre/anrechnung/requestAnrechnungImportant.php
index 0ee13d422..d224a52dd 100644
--- a/application/views/lehre/anrechnung/requestAnrechnungImportant.php
+++ b/application/views/lehre/anrechnung/requestAnrechnungImportant.php
@@ -4,8 +4,8 @@
        <!--    Beantragung: Fristen panel -->
   <div class="accordion-item">
     <h2 class="accordion-header">
-        <div  class="bg-info-subtle accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#Beantragung" aria-expanded="true" aria-controls="Beantragung">
         <div class="d-flex">
+        <div  class="bg-info-subtle accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#Beantragung" aria-expanded="true" aria-controls="Beantragung">
         
         <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
 				<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoFristenTitle'); ?>
@@ -22,8 +22,8 @@
   <!--    Referenzbeispiele ECTS Berechnung panel -->
   <div class="accordion-item">
     <h2 class="accordion-header">
-        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Referenzbeispiele" aria-expanded="false" aria-controls="Referenzbeispiele">
         <div class="d-flex">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#Referenzbeispiele" aria-expanded="false" aria-controls="Referenzbeispiele">
         <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
 					<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoEctsBerechnungTitle'); ?>
         </div>
@@ -54,8 +54,8 @@
     <!--    Herkunft der Kenntnisse: Angaben panel -->
   <div class="accordion-item">
     <h2 class="accordion-header">
-        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#HerkunftKenntnisse" aria-expanded="false" aria-controls="HerkunftKenntnisse">
         <div class="d-flex">
+        <div class="bg-info-subtle accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#HerkunftKenntnisse" aria-expanded="false" aria-controls="HerkunftKenntnisse">
         <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
 					<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoHerkunftKenntnisseTitle'); ?>
         </div>
diff --git a/composer.json b/composer.json
index 6aa94c0f7..053b5227f 100644
--- a/composer.json
+++ b/composer.json
@@ -308,9 +308,9 @@
 			"type": "package",
 			"package": {
 				"name": "twbs/bootstrap5",
-				"version": "5.1.3",
+				"version": "5.3",
 				"dist": {
-					"url": "https://github.com/twbs/bootstrap/archive/refs/tags/v5.1.3.zip",
+					"url": "https://github.com/twbs/bootstrap/archive/refs/tags/v5.3.zip",
 					"type": "zip"
 				}
 			}
@@ -473,7 +473,7 @@
 		"tinymce/tinymce5": "5.10.*",
 		"tomazdragar/simplecropper": "1.0",
 		"twbs/bootstrap3": "3.4.*",
-		"twbs/bootstrap5": "5.1.*",
+		"twbs/bootstrap5": "5.3.*",
 
 		"vuejs/vuejs3": "3.3.8",
 		"vuejs/vuerouter4": "4.1.3",
diff --git a/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index ab8f30260..8602def32 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -1,4 +1,5 @@
 /* basic */
+@import './CisVariables.css';
 @import '../components/searchbar/searchbar.css';
 @import '../components/Sprachen.css';
 
@@ -6,57 +7,176 @@ html {
   font-size: 0.875em;
 }
 
-/* variables */
-:root {
-  --fhc-cis-primary: #00649c;
-  --fhc-cis-primary-hover: #005585;
-  --fhc-cis-header-px: 1rem;
-  --fhc-cis-header-py: .5rem;
-  --fhc-cis-main-px: 1.5rem;
-  --fhc-cis-main-py: 1.5rem;
-  --fhc-cis-menu-lvl-1-bg: #00649c;
-  --fhc-cis-menu-lvl-1-color: #fff;
-  --fhc-cis-menu-lvl-1-bg-hover: #005585;
-  --fhc-cis-menu-lvl-1-color-hover: #fff;
-  --fhc-cis-menu-lvl-2-bg: #343a40;
-  --fhc-cis-menu-lvl-2-color: #fff;
-  --fhc-cis-menu-lvl-2-bg-hover: #2c3136;
-  --fhc-cis-menu-lvl-2-color-hover: #fff;
-  --fhc-cis-menu-lvl-2-color-active: #292b2a;
-  --fhc-cis-menu-lvl-3-bg: #72777A;
-  --fhc-cis-menu-lvl-3-color: #fff;
-  --fhc-cis-menu-lvl-3-bg-hover: #616568;
-  --fhc-cis-menu-lvl-3-color-hover: #fff;
-  --fhc-cis-menu-lvl-4-bg: #ced4da;
-  --fhc-cis-menu-lvl-4-color: #000;
-  --fhc-cis-menu-lvl-4-bg-hover: #d5dae0;
-  --fhc-cis-menu-lvl-4-color-hover: #000;
-  --fhc-cis-menu-lvl-5-bg: #e9ecef;
-  --fhc-cis-menu-lvl-5-color: #000;
-  --fhc-cis-menu-lvl-5-bg-hover: #eceff1;
-  --fhc-cis-menu-lvl-5-color-hover: #000;
-  --fhc-cis-grade-positive: rgb(0, 128, 0);
-  --fhc-cis-grade-negative: rgb(128, 0, 0);
+.fhc-dark-bg{
+	background-color: var(--fhc-dark);
+	color:var(--fhc-light) !important;
 }
+
+.fhc-dark-color {
+	color: var(--fhc-dark);
+}
+
+.fhc-dark-bg:hover{
+	filter: brightness(120%);
+}
+
+.fhc-primary-color{
+	color: var(--fhc-primary) !important;
+}
+
+.fhc-primary-bg {
+	background-color: var(--fhc-primary) !important;
+}
+
+.fhc-primary-highlight-bg {
+	background-color: var(--fhc-primary-highlight) !important;
+}
+
+.fhc-body-bg{
+	background-color:var(--fhc-background) !important;
+}
+
+.fhc-body-color{
+	color: var(--fhc-text) !important;
+}
+
+.fhc-secondary-bg{
+	background-color: var(--fhc-secondary) !important;
+}
+
+.fhc-secondary-color {
+	color: var(--fhc-secondary) !important;
+}
+
+.fhc-tertiary-bg{
+	background-color: var(--fhc-tertiary) !important;
+}
+
+.fhc-tertiary-color {
+	color: var(--fhc-tertiary) !important;
+}
+
+.fhc-fourth-bg {
+	background-color: var(--fhc-fourth) !important;
+}
+
+.fhc-fourth-color {
+	color: var(--fhc-fourth) !important;
+}
+
+.fhc-fifth-bg {
+	background-color: var(--fhc-fifth) !important;
+}
+
+.fhc-fifth-color {
+	color: var(--fhc-fifth) !important;
+}
+
+.fhc-body{
+	color:var(--fhc-text);
+	background-color: var(--fhc-background);
+	border-color: var(--fhc-border);
+}
+
+.fhc-secondary {
+	color: var(--fhc-text);
+	background-color: var(--fhc-secondary);
+	border-color: var(--fhc-border);
+}
+
+.fhc-tertiary{
+	color: var(--fhc-text);
+	background-color: var(--fhc-tertiary);
+	border-color:var(--fhc-border);
+}
+
+.fhc-link-color{
+	color: var(--fhc-link);
+}
+
+.fhc-text{
+	color: var(--fhc-text) !important;
+}
+
+:root{	
+	/* sidebar colors */
+	--fhc-cis-sidebar-bg: var(--fhc-tertiary);
+	--fhc-cis-menu-bg: var(--fhc-tertiary);
+
+	--fhc-cis-header-px: 1rem;
+	--fhc-cis-header-py: .5rem;
+	--fhc-cis-main-px: 1.5rem;
+	--fhc-cis-main-py: 1.5rem;
+
+	--fhc-cis-menu-lvl-1-bg: var(--fhc-primary);
+	--fhc-cis-menu-lvl-1-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-1-bg-hover: var(--fhc-primary-highlight);
+	--fhc-cis-menu-lvl-1-color-hover: var(--fhc-text);
+
+	--fhc-cis-menu-lvl-2-bg: var(--fhc-tertiary);
+	--fhc-cis-menu-lvl-2-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-2-bg-hover: var(--fhc-tertiary-highlight);
+	--fhc-cis-menu-lvl-2-color-hover: var(--fhc-text);
+
+	--fhc-cis-menu-lvl-3-bg: var(--fhc-secondary);
+	--fhc-cis-menu-lvl-3-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-3-bg-hover: var(--fhc-secondary-highlight);
+	--fhc-cis-menu-lvl-3-color-hover: var(--fhc-text);
+
+	--fhc-cis-menu-lvl-4-bg: var(--fhc-fourth);
+	--fhc-cis-menu-lvl-4-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-4-bg-hover: var(--fhc-fourth-highlight);
+	--fhc-cis-menu-lvl-4-color-hover: var(--fhc-text);
+
+	--fhc-cis-menu-lvl-5-bg: var(--fhc-fifth);
+	--fhc-cis-menu-lvl-5-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-5-bg-hover: var(--fhc-fifth-highlight);
+	--fhc-cis-menu-lvl-5-color-hover: var(--fhc-text);
+	--fhc-cis-grade-positive: var(--fhc-success);
+	--fhc-cis-grade-negative: var(--fhc-danger);
+}
+
 @media (min-width: 992px) {
-  :root {
-    --fhc-cis-menu-width: 250px;
-    --fhc-cis-header-height: 60px;
-    --fhc-cis-menu-bg: #72777A;
-  }
+	:root {
+		--fhc-cis-menu-width: 250px;
+		--fhc-cis-header-height: 60px;
+	}
 }
+
 @media (max-width: 991.98px) {
-  :root {
-    --fhc-cis-menu-width: 400px;
-    --fhc-cis-header-height: 40px;
-    --fhc-cis-menu-bg: #343a40;
-  }
+	:root {
+		--fhc-cis-menu-width: 400px;
+		--fhc-cis-header-height: 40px;
+	}
 }
 
 /* lvMenu entry style */
+#cis-menu .menu-entry {
+	color: var(--fhc-text);
+}
+
+[disabled="true"].menu-entry {
+	pointer-events: none;
+	cursor: default;
+	background-color: var(--fhc-disabled) !important;
+	color: black !important;
+	opacity: 0.75;
+	-webkit-touch-callout: none;
+	/* iOS Safari */
+	-webkit-user-select: none;
+	/* Safari */
+	-khtml-user-select: none;
+	/* Konqueror HTML */
+	-moz-user-select: none;
+	/* Old versions of Firefox */
+	-ms-user-select: none;
+	/* Internet Explorer/Edge */
+	user-select: none;
+}
+
 #cis-menu .menu-entry:hover{
-	background-color: var(--fhc-cis-primary);
-	color:white;
+	background-color: var(--fhc-primary);
+	color:var(--fhc-light);
 }
 
 /* buttons */
@@ -199,6 +319,7 @@ html {
 
 /* searchbar */
 #nav-search {
+  background-color: var(--fhc-primary);
   z-index: 1;
 }
 #nav-search.me-3 {
@@ -227,9 +348,16 @@ html {
 }
 
 #cis-main {
+  color: var(--fhc-text);
+  background-color: var(--fhc-background);
+  border-color: var(--fhc-border);
   padding: var(--fhc-cis-main-py) var(--fhc-cis-main-px);
 }
 
+#cis-main .fa-arrow-up-right-from-square {
+	color: var(--fhc-link) !important;
+}
+
 #nav-main-sticky {
 	max-height: calc(100vh - var(--fhc-cis-header-height));
 }
@@ -249,10 +377,6 @@ html {
   display: flex;
 }
 
-.fhc-active {
-  background-color: var(--fhc-cis-menu-lvl-2-color-active) !important;
-}
-
 .fhc-seperator {
   position: relative;
 }
@@ -265,7 +389,7 @@ html {
   margin-left: 12.5%;
   width: 75%; /* Full width of the parent element */
   height: 1px; /* Height of the border */
-  background: linear-gradient(to right, #ffffff, var(--fhc-cis-primary), #ffffff);
+  background: linear-gradient(to right, var(--fhc-background), var(--fhc-primary), var(--fhc-background));
   opacity: 0.8; /* Adjust opacity for a subtle fade effect */
 }
 
@@ -299,7 +423,7 @@ html {
     left: 0;
     height: var(--fhc-cis-header-height);
     width: var(--fhc-cis-menu-width);
-    background-color: var(--fhc-cis-primary);
+    background-color: var(--fhc-primary);
     padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
     z-index: 2;
   }
@@ -331,7 +455,7 @@ html {
   }
   #nav-main-toggle .collapsed .fa-arrow-circle-left {
     transform: scaleX(-1);
-    color: var(--bs-dark);
+    color: var(--fhc-black-40);
   }
   #nav-search {
     position: fixed;
@@ -349,7 +473,7 @@ html {
   #nav-user-btn {
     border-width: 0;
     padding: var(--fhc-cis-header-py) var(--fhc-cis-header-px);
-    background-color: var(--fhc-cis-primary);
+    background-color: var(--fhc-primary);
   }
   #nav-user-btn img {
     object-fit: contain;
@@ -359,7 +483,7 @@ html {
   #nav-user-menu {
     position: absolute;
     min-width: var(--fhc-cis-menu-width);
-    background-color: var(--fhc-cis-menu-lvl-2-bg);
+    background-color: var(--fhc-dark);
   }
 
   #nav-user-menu img {
@@ -394,7 +518,7 @@ html {
     margin-top: var(--fhc-cis-header-height);
   }
   #cis-header {
-    background-color: var(--fhc-cis-primary);
+    background-color: var(--fhc-primary);
     height: var(--fhc-cis-header-height);
     position: fixed;
     width: 100vw;
@@ -431,18 +555,23 @@ html {
   }
   #nav-user-menu {
     position: absolute;
-	background-color: var(--fhc-cis-menu-lvl-2-bg);
+	background-color: var(--fhc-dark);
   }
   #nav-main-menu {
     display: block;
   }
 }
+
+#nav-main{
+	background-color: var(--fhc-cis-sidebar-bg);
+}
+
 /* Typography */
 .fhc-header {
   display: flex;
   justify-content: space-between;
   align-items: end;
-  border-bottom: 1px solid #dee2e6;
+  border-bottom: 1px solid var(--fhc-border);
   margin: 1rem 0;
 }
 .fhc-header > h1 {
@@ -454,7 +583,7 @@ html {
   }
 }
 .fhc-header > h1 > small {
-  color: #6c757d;
+  color: var(--fhc-secondary);
   font-size: 1rem;
 }
 .fhc-header > h1 > small:before {
@@ -465,7 +594,7 @@ html {
   text-decoration: none;
 }
 .fhc-header > a:after {
-  color: var(--bs-body-color);
+  color: var(--fhc-text);
   content: "\f059";
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -482,7 +611,7 @@ html {
 [disabled="true"].fhc-entry {
 	pointer-events: none;
 	cursor: default;
-	background-color: #dadada !important;
+	background-color: var(--fhc-disabled) !important;
 	color: black !important;
 	-webkit-touch-callout: none; /* iOS Safari */
 	-webkit-user-select: none;/* Safari */
diff --git a/public/css/Cis4/CisVariables.css b/public/css/Cis4/CisVariables.css
new file mode 100644
index 000000000..53af08837
--- /dev/null
+++ b/public/css/Cis4/CisVariables.css
@@ -0,0 +1,265 @@
+/* css overrides for static cms content */
+@import './CisVariablesCms.css';
+
+/* colors */
+:root {
+
+	--fhc-black-10:black;
+	--fhc-black-20: #1d2024;
+	--fhc-black-30: #212529;
+	--fhc-black-40: #292b2a;
+	--fhc-black-50: #2B3035;
+	--fhc-black-60: #2c3136;
+	--fhc-black-70: #343a40;
+
+	--fhc-white-10: #FFFFFF;
+	--fhc-white-20:#f6f6f6;
+	--fhc-white-30:#eceff1;
+	--fhc-white-40:#e9ecef;
+	--fhc-white-50:#dee2e6;
+	--fhc-white-60:#d5dae0;
+	--fhc-white-70:#ced4da;
+	--fhc-white-80:#c7cbcf;
+	--fhc-white-90:#aeb3b8;
+
+	--fhc-gray-10: #858f97;
+	--fhc-gray-20: #72777A;
+	--fhc-gray-30: #616568;
+	--fhc-gray-40: #495057;
+
+	--fhc-blue-10: #0a57ca;
+	--fhc-blue-20: #79b7d8;
+	/*  --fhc-blue-20: #00649c;*/
+	--fhc-blue-30: #00598d;
+	/*--fhc-blue-40: #005585;*/
+	--fhc-blue-40: #61aed8;
+	--fhc-blue-50: #00507e;
+
+	--fhc-blue-primary: #00649c;
+	--fhc-blue-primary-highlight: #005585;
+
+	--fhc-red-10: #842029;
+	--fhc-red-20: #800000;
+	
+	--fhc-green-10: #008000;
+
+	--fhc-beige-10: rgba(245, 233, 215,0.5);
+	--fhc-beige-20: rgba(172, 153, 125,0.5);
+	
+	
+
+}
+
+:root.light{
+	
+
+	/* fhc base colors */
+	--fhc-primary: var(--fhc-blue-20);
+	--fhc-primary-highlight: var(--fhc-blue-40);
+
+	--fhc-tertiary: var(--fhc-white-20);
+	--fhc-tertiary-highlight: var(--fhc-white-40);
+
+	--fhc-secondary: var(--fhc-white-40);
+	--fhc-secondary-highlight: var(--fhc-white-60);
+
+	--fhc-fourth: var(--fhc-white-60);
+	--fhc-fourth-highlight: var(--fhc-white-80);
+
+	--fhc-fifth: var(--fhc-white-80);
+	--fhc-fifth-highlight: var(--fhc-white-90);
+
+	/*background*/
+	--fhc-background: var(--fhc-white-10);
+	--fhc-background-highlight: var(--fhc-white-60);
+	
+	/*text*/
+	--fhc-text: var(--fhc-black-30);
+	
+	/* shadows and borders */
+	--fhc-shadow-20: rgba(0, 0, 0, 0.2);
+	--fhc-shadow-40: rgba(0, 0, 0, 0.4);
+	--fhc-shadow-60: rgba(0, 0, 0, 0.6);
+	--fhc-shadow-80: rgba(0, 0, 0, 0.8);
+	--fhc-box-shadow: var(--fhc-white-50);
+	--fhc-border: var(--fhc-white-50);
+	--fhc-border-highlight: var(--fhc-gray-40);
+
+	/* links */
+	--fhc-link: var(--fhc-blue-10);
+
+	/* disabled */
+	--fhc-disabled: var(--fhc-gray-10);
+
+	/* status colors */
+	--fhc-danger: var(--fhc-red-10);
+	--fhc-success: var(--fhc-green-10);
+	--fhc-dark: var(--fhc-black-30);
+	--fhc-light: var(--fhc-white-50);
+
+
+}
+
+:root.dark{
+
+	/* fhc base colors */
+	--fhc-primary: var(--fhc-blue-primary-highlight);
+	--fhc-primary-highlight: var(--fhc-blue-primary);
+
+	--fhc-secondary: var(--fhc-black-70);
+	--fhc-secondary-highlight: var(--fhc-gray-40);
+
+	--fhc-tertiary: var(--fhc-black-50);
+	--fhc-tertiary-highlight: var(--fhc-black-70);
+
+	--fhc-danger: var(--fhc-red-10);
+
+	/*background*/
+	--fhc-background: var(--fhc-black-30);
+	--fhc-background-highlight: var(--fhc-black-20);
+
+	/*text*/
+	--fhc-text: var(--fhc-white-50);
+
+	/* shadows and borders */
+	--fhc-shadow-20: rgba(125, 125, 125, 0.2);
+	--fhc-shadow-40: rgba(125, 125, 125, 0.4);
+	--fhc-shadow-60: rgba(125, 125, 125, 0.6);
+	--fhc-shadow-80: rgba(125, 125, 125, 0.8);
+	--fhc-box-shadow: var(--fhc-gray-40);
+	--fhc-border: var(--fhc-gray-40);
+	--fhc-border-highlight: var(--fhc-white-90);
+
+	/* links */
+	--fhc-link: var(--fhc-white-70);
+
+	/* disabled */
+	--fhc-disabled: var(--fhc-gray-10);
+
+	/* status colors */
+	--fhc-danger: var(--fhc-red-10);
+	--fhc-success: var(--fhc-green-10);
+	--fhc-dark: var(--fhc-black-50);
+	--fhc-light: var(--fhc-white-70);
+
+}
+
+:root.purple {
+
+	--fhc-purple-primary: rgb(150, 120, 255);
+	--fhc-purple-primary-highlight: rgb(170, 140, 255);
+	--fhc-purple-5: rgb(245, 240, 255);
+	--fhc-purple-10: rgb(235, 225, 255);
+	--fhc-purple-20: rgb(220, 200, 255);
+	--fhc-purple-30: rgb(200, 170, 255);
+	--fhc-purple-40: rgb(180, 140, 240);
+	--fhc-purple-50: rgb(160, 110, 225);
+	--fhc-purple-60: rgb(140, 90, 210);
+	--fhc-purple-70: rgb(120, 70, 195);
+	--fhc-purple-80: rgb(100, 50, 180);
+	--fhc-purple-90: rgb(80, 30, 165);
+
+	/* fhc base colors */
+	--fhc-primary: var(--fhc-purple-primary-highlight);
+	--fhc-primary-highlight: var(--fhc-purple-primary);
+
+	--fhc-secondary: var(--fhc-purple-30);
+	--fhc-secondary-highlight: var(--fhc-purple-50);
+
+	--fhc-tertiary: var(--fhc-purple-20);
+	--fhc-tertiary-highlight: var(--fhc-purple-40);
+
+	/* background */
+	--fhc-background: var(--fhc-purple-5);
+	--fhc-background-highlight: var(--fhc-purple-10);
+
+	/* text */
+	--fhc-text: var(--fhc-black-20);
+
+	/* shadows and borders */
+	--fhc-shadow-20: rgba(150, 100, 200, 0.2);
+	--fhc-shadow-40: rgba(150, 100, 200, 0.4);
+	--fhc-shadow-60: rgba(150, 100, 200, 0.6);
+	--fhc-shadow-80: rgba(150, 100, 200, 0.8);
+	--fhc-box-shadow: var(--fhc-white-50);
+	--fhc-border: var(--fhc-white-50);
+	--fhc-border-highlight: var(--fhc-gray-40);
+
+	/* links */
+	--fhc-link: var(--fhc-black-50);
+
+	/* disabled */
+	--fhc-disabled: var(--fhc-purple-20);
+
+	/* status colors */
+	--fhc-danger: var(--fhc-red-10);
+	--fhc-success: var(--fhc-green-10);
+	--fhc-dark: var(--fhc-black-20);
+	--fhc-light: var(--fhc-white-70);
+
+}
+
+/* fhc primary*/
+html.dark .bg-primary,
+html.dark .btn-primary,
+html.dark .btn-outline-primary {
+	background-color: var(--fhc-primary) !important;
+	border-color: var(--fhc-primary) !important;
+	color: white;
+}
+
+html.dark .btn-outline-primary:hover,
+html.dark .btn-primary:hover {
+	filter: brightness(90%);
+}
+
+html.dark .text-primary {
+	color: var(--fhc-primary) !important;
+}
+
+html.dark .btn-outline-primary,
+html.dark .border-primary {
+	border-color: var(--fhc-primary) !important;
+}
+
+/* fhc danger*/
+html.dark .bg-danger,
+html.dark .btn-danger,
+html.dark .btn-outline-danger {
+	background-color: var(--fhc-danger) !important;
+	border-color: var(--fhc-danger) !important;
+	color: white;
+}
+
+html.dark .btn-outline-danger:hover,
+html.dark .btn-danger:hover {
+	filter: brightness(90%);
+}
+
+html.dark .text-danger {
+	color: var(--fhc-danger) !important;
+}
+
+html.dark .border-danger {
+	border-color: var(--fhc-danger) !important;
+}
+
+
+html.dark .tabulator,
+html.dark .tabulator .tabulator-header,
+html.dark .tabulator .tabulator-header .tabulator-col,
+html.dark .tabulator .tabulator-table,
+html.dark .tabulator .tabulator-row {
+	background-color: var(--fhc-tertiary) !important;
+	color: var(--fhc-text) !important;
+	border-color: var(--fhc-border) !important;
+}
+
+html.dark .tabulator .tabulator-cell {
+	background-color: var(--fhc-secondary) !important;
+	border-color: var(--fhc-border) !important;
+}
+
+html.dark .tabulator .tabulator-header .tabulator-col:hover {
+	background-color: var(--fhc-secondary) !important;
+}
\ No newline at end of file
diff --git a/public/css/Cis4/CisVariablesCms.css b/public/css/Cis4/CisVariablesCms.css
new file mode 100644
index 000000000..a5e46a6f9
--- /dev/null
+++ b/public/css/Cis4/CisVariablesCms.css
@@ -0,0 +1,14 @@
+/* css overrides for dark mode */
+html.dark #fhc-cms-content *[style*="color"] {
+	color: var(--fhc-text) !important;
+}
+
+/* fhc cms classes */
+html.dark #fhc-cms-content a {
+	color: var(--fhc-link);
+}
+
+html.dark #fhc-cms-content img {
+	background-color: var(--fhc-text);
+	color: var(--fhc-background);
+}
\ No newline at end of file
diff --git a/public/css/Cis4/Cms.css b/public/css/Cis4/Cms.css
index 13b90aac5..4151e7500 100644
--- a/public/css/Cis4/Cms.css
+++ b/public/css/Cis4/Cms.css
@@ -11,14 +11,14 @@
 	margin-inline-start: 0 !important;
 }
 #cms a.btn-outline-primary {
-	color: var(--fhc-cis-primary);
-	border-color: var(--fhc-cis-primary);
+	color: var(--fhc-primary);
+	border-color: var(--fhc-primary);
 }
 #cms a.btn-outline-primary:hover,
 #cms a.btn-outline-primary:focus {
 	color: #fff;
-	background-color: var(--fhc-cis-primary);
-	border-color: var(--fhc-cis-primary);
+	background-color: var(--fhc-primary);
+	border-color: var(--fhc-primary);
 }
 #cms a.btn-primary {
 	color: var(--fhc-cis-menu-lvl-1-color);
diff --git a/public/css/Fhc.css b/public/css/Fhc.css
index 6e6a25200..c5368930d 100644
--- a/public/css/Fhc.css
+++ b/public/css/Fhc.css
@@ -10,7 +10,7 @@
   font-size: calc(1.325rem + .9vw);
 }
 .fhc-header > :first-child > small {
-  color: var(--bs-secondary);
+  color: var(--fhc-secondary);
   font-size: .65em;
   padding-inline-start: 1em;
 }
diff --git a/public/css/FilterWidget.css b/public/css/FilterWidget.css
index 6c33f63b8..5723de69e 100644
--- a/public/css/FilterWidget.css
+++ b/public/css/FilterWidget.css
@@ -1,8 +1,15 @@
+:root{
+	--filter-widget-border: var(--fhc-dark);
+	--filter-widget-color: var(--fhc-dark);
+	--filter-widget-primary: var(--fhc-primary);
+	--filter-widget-border-light: var(--fhc-border);
+}
+
 .filter-name-title {
 	font-family: inherit;
 	font-size: 16px;
 	line-height: 1.1;
-	color: black;
+	color: var(--filter-widget-color);
 }
 
 .panel-title {
@@ -26,7 +33,7 @@
 }
 
 .drag-and-drop-fields-span {
-	border: 1px solid black;
+	border: 1px solid var(--filter-widget-border);
 	border-radius: 7px;
 	margin-right: 6px;
 	margin-bottom: 10px;
@@ -64,7 +71,7 @@
 	right: 100%;
 	height: 100%;
 	margin-right: 3px;
-	border-left: 2px solid #428bca;
+	border-left: 2px solid var(--filter-widget-primary);
 }
 
 .selection-after::after {
@@ -74,7 +81,7 @@
 	left: 100%;
 	height: 100%;
 	margin-left: 3px;
-	border-right: 2px solid #428bca;
+	border-right: 2px solid var(--filter-widget-primary);
 }
 
 .applied-filter-operation {
@@ -139,10 +146,10 @@
 
 .up-down-border {
 	border-top-width: 1px;
-	border-top-color: #ddd;
+	border-top-color: var(--filter-widget-border-light);
 	border-top-style: solid;
 	border-bottom-width: 1px;
-	border-bottom-color: #ddd;
+	border-bottom-color: var(--filter-widget-border-light);
 	border-bottom-style: solid;
 }
 
diff --git a/public/css/components/FilterComponent.css b/public/css/components/FilterComponent.css
index 50bfe561e..805987a84 100644
--- a/public/css/components/FilterComponent.css
+++ b/public/css/components/FilterComponent.css
@@ -1,3 +1,9 @@
+:root{
+	--fhc-filtercomponent-primary: var(--fhc-primary);
+	--fhc-filtercomponent-bg:var(--fhc-background);
+	--fhc-filtercomponent-border:var(--fhc-border);
+}
+
 .filter-header-title {
 	text-align: right;
 }
@@ -26,9 +32,9 @@
 	margin-left: 7px;
 	padding: 11px;
 	display: inline-block;
-	background-color: white;
+	background-color: var(--fhc-filtercomponent-bg);
 	border-style: solid;
-	border-color: black;
+	border-color: var(--fhc-filtercomponent-border);
 	border-width: 1px;
 	border-radius: 7px;
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
@@ -47,7 +53,7 @@
         right: 100%;
         height: 100%;
         margin-right: 3px;
-        border-left: 2px solid #428bca;
+        border-left: 2px solid var(--fhc-filtercomponent-primary);
 }
 
 .selection-after::after {
@@ -57,7 +63,7 @@
         left: 100%;
         height: 100%;
         margin-left: 3px;
-        border-right: 2px solid #428bca;
+        border-right: 2px solid var(--fhc-filtercomponent-primary);
 }
 
 .filter-table-dataset {
diff --git a/public/css/components/FormUnderline.css b/public/css/components/FormUnderline.css
index 6b3092b49..f41883265 100644
--- a/public/css/components/FormUnderline.css
+++ b/public/css/components/FormUnderline.css
@@ -8,11 +8,13 @@
   
   }
   
-  
+  a.form-underline-content{
+	color: var(--fhc-link);
+  }
   
   .form-underline .form-underline-content{
     border-width: 1px;
-    border-color: transparent transparent #dee2e6 transparent;
+    border-color: transparent transparent var(--fhc-border) transparent;
     border-style: solid;
     padding-bottom: 0.25rem;
     padding-left: 0.5rem;
diff --git a/public/css/components/MyLv.css b/public/css/components/MyLv.css
index 2ce544582..b7176fb35 100644
--- a/public/css/components/MyLv.css
+++ b/public/css/components/MyLv.css
@@ -1,4 +1,8 @@
+:root{
+	--myLv-disabled: var(--fhc-disabled);
+}
+
 .unavailable, .unavailable:hover{
-	color: #565e647f !important;
+	color: var(--myLv-disabled) !important;
 	cursor: default;
 }
diff --git a/public/css/components/NavigationComponent.css b/public/css/components/NavigationComponent.css
index 429a131b5..bf38d3d8c 100644
--- a/public/css/components/NavigationComponent.css
+++ b/public/css/components/NavigationComponent.css
@@ -1,13 +1,24 @@
 /*
  * Hederer
  */
+
+ :root{
+	--nav-component-bg: var(--fhc-secondary);
+	--nav-component-border: var(--fhc-border);
+	--nav-component-color: var(--fhc-text);
+	--nav-left-component-border: var(--fhc-border);
+	--nav-left-component-bg: var(--fhc-secondary);
+	--nav-left-component-color: var(--fhc-primary);
+	--nav-left-component-hover: var(--fhc-secondary-highlight);
+ }
+
 .navbar-header {
-	background-color: #f8f8f8;
+	background-color: var(--nav-component-bg);
 	padding-top: 0px;
 	padding-bottom: 0px;
 	padding-left: 10px;
 	border-style: solid;
-	border-color: #e7e7e7;
+	border-color: var(--nav-component-border);
 	border-width: 0 0 1px;
 }
 
@@ -15,7 +26,7 @@
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 	font-size: 18px;
 	line-height: 1.42857143;
-	color: #5e5e5e !important;
+	color: var(--nav-component-color) !important;
 	padding-top: 15px !important;
 	padding-right: 7px !important;
 	padding-left: 7px !important;
@@ -34,8 +45,8 @@
 	z-index: 1;
 	position: absolute;
 	width: 250px;
-	border-right: 1px solid #e7e7e7;
-	background-color: #f8f8f8;
+	border-right: 1px solid ;
+	background-color:var(--nav-left-component-bg);
 }
 
 .navbar-left-side ul {
@@ -43,7 +54,7 @@
 }
 
 .navbar-left-side ul li {
-	border-bottom: 1px solid #e7e7e7;
+	border-bottom: 1px solid var(--nav-left-component-border);
 }
 
 .left-side-menu-second-level {
@@ -67,7 +78,7 @@
 	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 	font-size: 14px;
 	line-height: 1.42857143;
-	color: #23527c;
+	color: var(--nav-left-component-color);
 	padding-top: 10px !important;
 	padding-bottom: 10px !important;
 	padding-left: 7px !important;
@@ -76,7 +87,7 @@
 }
 
 .left-side-menu-link-entry:hover {
-	background-color: #eee;
+	background-color: var(--nav-left-component-hover);
 }
 
 /*
diff --git a/public/css/components/Profil.css b/public/css/components/Profil.css
index aa9932cd7..de6adbee7 100644
--- a/public/css/components/Profil.css
+++ b/public/css/components/Profil.css
@@ -1,11 +1,14 @@
 
-
+:root{
+	--profil-border: var(--fhc-border);
+	--profil-tabulator-shadow:var(--fhc-shadow-20);
+}
 
 
 .image-lock{
   height:22px; 
   width:21px; 
-  background-color:white; 
+  background-color:var(--profil-border); 
   position:absolute;
   /* top: 1px is important, otherwise it goes over the border of the thumbnail*/ 
   top:1px; 
@@ -18,7 +21,7 @@
 
 .tabulator-collapsed-row{
     padding:15px;
-    background-color: rgba(0,0,0,0.1);
+    background-color: var(--profil-tabulator-shadow);
 
 }
 
diff --git a/public/css/components/Sprachen.css b/public/css/components/Sprachen.css
index 73dfa563f..028b4f2f2 100644
--- a/public/css/components/Sprachen.css
+++ b/public/css/components/Sprachen.css
@@ -1,9 +1,13 @@
 .sprachen-entry{
-	background-color: var(--fhc-cis-primary-hover);
+	background-color: var(--fhc-primary);
+}
+
+.sprachen-entry:hover {
+	background-color: var(--fhc-primary);
 }
 
 [selected="true"].sprachen-entry {
-	background-color: var(--fhc-cis-primary);
+	background-color: var(--fhc-primary-highlight);
 }
 
 .sprachen-entry.btn {
diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 9edc1c0f2..10958f03f 100644
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -1,14 +1,44 @@
 :root{
-	--fhc-calendar-pane-height: calc(100vh - 220px);
-	--fhc-calendar-past: #F5E9D7
+	--calendar-pane-height: calc(100vh - 220px);
+	
+	--calendar-primary: var(--fhc-primary);
+	--calendar-border: var(--fhc-border);
+	--calendar-border-highlight: var(--fhc-border-highlight);
+	--calendar-text: var(--fhc-text);
+	--calendar-text-light: var(--fhc-text);
+	--calendar-bg: var(--fhc-background);
+	--calendar-hour-indicator-bg: var(--fhc-background);
+	--calendar-week-page-header-background: var(--fhc-background);
+	--calendar-week-page-header-color: var(--fhc-text);
+	--calendar-week-page-header-border: var(--fhc-border);
+	--calendar-week-page-header-hover-background: var(--fhc-background-highlight);
+	--calendar-all-day-event-background: var(--fhc-background);
+	--calendar-past: var(--fhc-beige-10);
 }
 
-.fhc-calendar-week-page-header {
-  background-color: #e9ecef;
+:root.dark{
+	--calendar-past: var(--fhc-beige-20);
+}
+
+.fhc-calendar-hour-indicator{
+	border-top: 1px solid var(--calendar-border);
+}
+
+.fhc-calendar-hour-indicator span{
+	background-color: var(--calendar-hour-indicator-bg) !important;
+}
+
+.fhc-calendar-week-page-header{
+	color: var(--calendar-text);
+	background-color: var(--calendar-week-page-header-background);
+}
+
+.fhc-calendar-week-page-header > div {
+	border-right: 1px solid var(--calendar-border);
 }
 
 .fhc-calendar-week-page-header > div:hover{
-	background-color: #dddfe2;
+	background-color: var(--calendar-week-page-header-hover-background);
 }
 
 .fhc-calendar-months .col-4,
@@ -70,7 +100,7 @@
 }
 
 .fhc-calendar-week-page .all-day-event-border{
-	box-shadow: 1px 1px 0 #dee2e6;
+	box-shadow: 1px 1px 0 var(--fhc-box-shadow);
 }
 
 .fhc-calendar-week-page .all-day-event{
@@ -85,7 +115,7 @@
 	grid-template-columns:repeat(7,1fr);
 	width:100%;
 	z-index:3;
-	background-color:white;
+	background-color:var(--calendar-all-day-event-background);
 }
 
 .fhc-calendar-week-page .all-day-event-container::before {
@@ -95,12 +125,12 @@
 	bottom: 0;
 	left: -3em;
 	right: 100%;
-	background-color: white;
-	box-shadow: 1px 1px 0 #dee2e6;
+	background-color: var(--calendar-all-day-event-background);
+	box-shadow: 1px 1px 0 var(--fhc-box-shadow);
 }
 
 .fhc-calendar-day-page .all-day-event-border {
-	box-shadow: 0 0 0 1px #dee2e6;
+	box-shadow: 0 0 0 1px var(--fhc-box-shadow);
 }
 
 .fhc-calendar-day-page .all-day-event {
@@ -116,13 +146,13 @@
 	grid-template-columns: 3em 1fr;
 	width: 100%;
 	z-index: 3;
-	background-color:white;
-	box-shadow: 1px 1px 0 #dee2e6;
+	background-color:var(--calendar-all-day-event-background);
+	box-shadow: 1px 1px 0 var(--fhc-box-shadow);
 }
 
 /* grid hour lines of the Stundenplan use box-shadow instead of border because box-shadow renders consistently on different viewports*/
 .box-shadow-border{
-	box-shadow: 0 0 0 1px #dee2e6 !important;
+	box-shadow: 0 0 0 1px var(--calendar-border) !important;
 }
 
 .fhc-calendar-no-events-overlay{
@@ -137,7 +167,7 @@
 	margin:auto;
 	width: 100%;
 	height: 100%;
-	background-image: linear-gradient(120deg, white, gray );
+	background-image: linear-gradient(120deg, var(--fhc-background), var(--fhc-dark) );
 	opacity: .7;
 }
 .fhc-calendar-day-page {
@@ -150,9 +180,7 @@
 .fhc-calendar-day-page .flex-column > .flex-grow-1 {
   padding-left: 3em;
 }
-.fhc-calendar-day-page .flex-column {
-	border-right: 1px solid #dee2e6;
-}
+
 .fhc-calendar-day-page .events {
   display: grid;
   grid-template-columns: 3em 1fr;
@@ -164,11 +192,19 @@
   display: grid;
 }
 
+.fhc-calendar-month-page-day{
+	color: var(--calendar-text) !important;
+}
+
+.fhc-calendar-month-page-day.fhc-calendar-past:not(.fhc-calendar-month-page-day-focusday) {
+	color: var(--fhc-text) !important;
+}
+
 .fhc-calendar-lg .fhc-calendar-month-page-day,
 .fhc-calendar-lg .fhc-calendar-month-page-weekday,
 .fhc-calendar-md .fhc-calendar-month-page-day,
 .fhc-calendar-md .fhc-calendar-month-page-weekday {
-  border: solid 1px #dee2e6;
+  border: solid 1px var(--calendar-border);
 }
 .fhc-calendar-lg .fhc-calendar-month-page-day,
 .fhc-calendar-md .fhc-calendar-month-page-day {
@@ -178,7 +214,7 @@
 }
 .fhc-calendar-lg .fhc-calendar-month-page-day.active,
 .fhc-calendar-md .fhc-calendar-month-page-day.active {
-  border-color: var(--bs-secondary);
+  border-color: var(--calendar-border-highlight);
 }
 /*.fhc-calendar-lg .fhc-calendar-month-page-day .events,*/
 /*.fhc-calendar-md .fhc-calendar-month-page-day .events {*/
@@ -223,8 +259,8 @@
 }
 
 .fhc-calendar-month-page-weekday:hover {
-	background-color:#37789c;
-	color:white;
+	background-color:var(--calendar-primary);
+	color:var(--calendar-text-light);
 	
 }
 
@@ -237,14 +273,14 @@
 
 
 .fhc-calendar-past {
-	background-color: var(--fhc-calendar-past);
-	border-color: #E8E8E8;
+	background-color: var(--calendar-past);
+	border-color: var(--calendar-border);
 	opacity: 0.5;
 }
 
 .fhc-calendar-month-page-day-focusday {
-	border-color: black !important;
-	background-color: white;
+	border-color: var(--calendar-border-highlight) !important;
+	background-color: var(--calendar-bg);
 	position: relative;
 	animation: dash-animation 2.5s linear infinite;
 }
@@ -276,20 +312,20 @@
 	bottom:0;
 	left:0;
 	right:0;
-	box-shadow: inset 0 0 0 2px black !important;
+	box-shadow: inset 0 0 0 2px var(--calendar-border) !important;
 	pointer-events: none;
 	z-index: 2;
 }
 
 .fhc-calendar-sm .fhc-calendar-month-page-day.active .no,
 .fhc-calendar-xs .fhc-calendar-month-page-day.active .no {
-  background-color: rgba(var(--bs-info-rgb), 0.25);
+  background-color: var(--calendar-primary);
   border-radius: 50%;
   font-weight: bold;
 }
 .fhc-calendar-sm .fhc-calendar-month-page-day:not(.active):hover .no,
 .fhc-calendar-xs .fhc-calendar-month-page-day:not(.active):hover .no {
-  background-color: rgba(var(--bs-secondary-rgb), 0.25);
+  background-color: var(--calendar-primary);
   border-radius: 50%;
 }
 /*.fhc-calendar-sm .fhc-calendar-month-page-day .no,*/
@@ -317,6 +353,57 @@
 }
 
 .selectedEvent {
-	background-color: #00649c !important;
-	color: white;
+	background-color: var(--calendar-primary) !important;
+	color: var(--calendar-text-light);
+}
+
+.fhc-calendar-day-page .curTimeIndicator{
+	position: absolute;
+	left: 0;
+	right: 0;
+	pointer-events: none;
+	padding-left: 7rem;
+	margin-top: -1px;
+	z-index: 2;
+	border-color: var(--calendar-border)!important;
+}
+
+.fhc-calendar-week-page .curTimeIndicator {
+	position: absolute;
+	left: 0;
+	right: 0;
+	pointer-events: none;
+	padding-left: 1rem;
+	margin-top: -1px;
+	z-index: 2;
+	border-color: var(--calendar-border) !important;
+}
+
+.fhc-calendar-week-page .past::before{
+	content:"";
+	background-color: var(--calendar-past);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	opacity: 0.5;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.fhc-calendar-week-page .overlay {
+	background-color: var(--calendar-past);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	opacity: 0.5;
+}
+
+.fhc-calendar-day-page .overlay {
+	background-color: var(--calendar-past);
+	position: absolute;
+	pointer-events: none;
+	z-index: 2;
+	opacity: 0.5;
 }
\ No newline at end of file
diff --git a/public/css/components/dashboard.css b/public/css/components/dashboard.css
index e742f7fa4..ef7b9caaa 100644
--- a/public/css/components/dashboard.css
+++ b/public/css/components/dashboard.css
@@ -1,6 +1,21 @@
 @import './calendar.css';
 @import './dashboard/news.css';
 
+:root{
+	--dashboard-danger: var(--fhc-danger);
+	--fhc-dashboard-grid-size: 4;
+}
+
+@media(max-width: 577px) {
+	:root {
+		--fhc-dashboard-grid-size: 1;
+	}
+}
+
+.core-dashboard a{
+	color: var(--fhc-link);
+}
+
 .empty-tile-hover {
 	height: 100%;
 	width: 100%;
@@ -16,18 +31,11 @@
 }
 
 .alert-danger .form-check-input:checked {
-	border-color: #842029;
-	background-color: #842029;
+	border-color: var(--dashboard-danger);
+	background-color: var(--dashboard-danger);
 }
 
-:root {
-	--fhc-dashboard-grid-size: 4;
-}
-@media(max-width: 577px) {
-	:root {
-		--fhc-dashboard-grid-size: 1;
-	}
-}
+
 
 .mirror-x {
 	transform: scaleX(-1);
@@ -40,5 +48,8 @@
 	cursor: move;
 }
 
+#deleteBookmark i{
+	color: var(--fhc-danger);
+}
 
 
diff --git a/public/css/components/dashboard/news.css b/public/css/components/dashboard/news.css
index 58d9ad263..d65b51592 100644
--- a/public/css/components/dashboard/news.css
+++ b/public/css/components/dashboard/news.css
@@ -1,5 +1,10 @@
 :root{
     --news-widget-height: 1;
+	--news-widget-bg: var(--fhc-primary);
+	--news-widget-highlight-color: var(--fhc-primary-highlight);
+	--news-widget-border: var(--fhc-border);
+	--news-widget-border-highlight: var(--fhc-border-highlight);
+	--news-widget-text-light: var(--fhc-text);
 }
 
 
@@ -48,31 +53,26 @@
 
 .fhc-news-menu-item {
     padding: 0.375rem;
-    color: var(--fhc-cis-menu-lvl-1-color);
+    color: var(--news-widget-text-light);
     min-height: 5%;
     max-height: 30%;
     width: 100%;
     justify-content: space-between;
     align-items: center;
-    background-color: #00649c;
-    border: 1px solid #f1f1f1;
+    background-color: var(--news-widget-bg);
+    border: 1px solid var(--news-widget-border);
     cursor: pointer;
     transition: background-color 0.2s ease, border-color 0.2s ease; /* Smooth transition */
 }
 
 .fhc-news-menu-item:hover {
-    background-color: var(--fhc-cis-menu-lvl-1-bg-hover);
-    border-color: #f1f1f1;
-}
-
-.fhc-news-menu-item:active {
-    background-color: var(--fhc-cis-menu-lvl-1-color-hover);
-    border-color: #f1f1f1;
+    background-color: var(--news-widget-highlight-color);
+    border-color: var(--news-widget-border-highlight);
 }
 
 .fhc-news-menu-item.selected {
-    background-color: var(--fhc-cis-menu-lvl-1-bg-hover);
-    border-right: 2px solid #fff;
+    background-color: var(--news-widget-highlight-color);
+    border: 2px solid var(--news-widget-border-highlight);
     
 }
 
diff --git a/public/css/components/searchbar/searchbar.css b/public/css/components/searchbar/searchbar.css
index 3250a20c7..6aa84c716 100644
--- a/public/css/components/searchbar/searchbar.css
+++ b/public/css/components/searchbar/searchbar.css
@@ -5,28 +5,35 @@
 
 @import url(./switches.css);
 
-#search-filter{
-    border: 1px solid #ced4da;
+:root{
+	--searchbar-shadow: var(--fhc-shadow-40);
 }
 
-
 .searchbar_settings {
-    position: absolute; 
+	position: absolute; 
     z-index: 9999; 
-    background-color: #343a40;
+    background-color: var(--fhc-dark);
 }
 
 .searchbar_results {
     position: absolute; 
     z-index: 9998; 
-    background-color: #fff; 
-    border: 1px solid lightgrey;
+    background-color: var(--fhc-background); 
+    border: 1px solid var(--fhc-border);
     padding: .5rem;
     top: 100%;
     width: 100%;
     left: 0;
     right: 0;
-	box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
+	box-shadow: 2px 2px 4px var(--searchbar-shadow);
+}
+
+.searchbar_results a{
+	color: var(--fhc-link);
+}
+
+.searchbar_results a:not(a~i) {
+	color: inherit;
 }
 
 .searchbar_results_scroller {
@@ -35,7 +42,7 @@
 }
 
 .searchbar_result {
-    border-bottom: 1px solid lightgrey;
+    border-bottom: 1px solid var(--fhc-border);
     margin-bottom: 1rem;
 }
 
diff --git a/public/css/components/searchbar/switches.css b/public/css/components/searchbar/switches.css
index 164976514..64da02ce8 100644
--- a/public/css/components/searchbar/switches.css
+++ b/public/css/components/searchbar/switches.css
@@ -1,23 +1,24 @@
+:root{
+	--fhc-switches-checked-bg: var(--fhc-light);
+	--fhc-switches-unchecked-bg: var(--fhc-disabled);
+	--fhc-switches-shadow: var(--fhc-shadow-20);
+}
+
 .fhc-switches:checked  {
-    background-color: white !important;
-    border-color: white !important;
+    background-color: var(--fhc-switches-checked-bg) !important;
+    border-color: transparent;
     background-position: right center !important;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000'/%3e%3c/svg%3e") !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='black'/%3e%3c/svg%3e") !important;
 }
 
 .fhc-switches  {
-    background-color: var(--bs-gray-600) !important;
-    border-color: var(--bs-gray-600) !important;
+    background-color: var(--fhc-switches-unchecked-bg) !important;
+    border-color: transparent;
     background-position: left center !important;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238e99a3'/%3e%3c/svg%3e") !important;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%236b747a'/%3e%3c/svg%3e") !important;
 }
 
 .fhc-switches:focus  {
-    box-shadow: 0 0 0 .25rem rgba(108, 117, 125,.25);
+    box-shadow: 0 0 0 .25rem var(--fhc-switches-shadow);
 }
 
-/*.form-switch .form-check-input:checked {
- 
-
-rgb(52, 58, 64)*/
-
diff --git a/public/css/components/verticalsplit.css b/public/css/components/verticalsplit.css
index 8d8599ec4..1d5a56788 100644
--- a/public/css/components/verticalsplit.css
+++ b/public/css/components/verticalsplit.css
@@ -3,9 +3,9 @@
     Author     : bambi
 */
 :root {
-    --fhc-verticalsplit-vsplitter-bg-color: #eee;
-    --fhc-verticalsplit-vsplitter-border-color: #eee;
-    --fhc-verticalsplit-vsplitter-splitactions-color: #000;
+    --fhc-verticalsplit-vsplitter-bg-color: var(--fhc-background);
+    --fhc-verticalsplit-vsplitter-border-color: var(--fhc-border);
+    --fhc-verticalsplit-vsplitter-splitactions-color: var(--fhc-dark);
 }
 
 .verticalsplitted {
diff --git a/public/css/lehre/anrechnung.css b/public/css/lehre/anrechnung.css
index 50914aa1f..22e2641fe 100644
--- a/public/css/lehre/anrechnung.css
+++ b/public/css/lehre/anrechnung.css
@@ -24,46 +24,6 @@
     border-color: #DEE2E6 !important;
 }
 
-.bg-info-subtle{
-    background-color: #D9EDF7 !important; 
-    color: #31708F !important;
-    border-style: solid !important;
-    border-width: 1px !important;
-    border-color: #BCE8F1 !important;
-}
-
-.bg-warning-subtle{
-    background-color: #FFF3CD !important; 
-    color: #664D03 !important;
-    border-style: solid !important;
-    border-width: 1px !important;
-    border-color: #FFE69C !important;
-}
-
-.bg-success-subtle{
-    background-color: #D1E7DD !important; 
-    color: #0A3622 !important;
-    border-style: solid !important;
-    border-width: 1px !important;
-    border-color: #A3CFBB !important;
-}
-
-.bg-danger-subtle{
-    background-color: #F8D7DA !important; 
-    color: #672B31 !important;
-    border-style: solid !important;
-    border-width: 1px !important;
-    border-color: #F1AEB5 !important;
-}
-
-.bg-primary-subtle{
-    background-color: #CFE2FF !important; 
-    color: #052C65 !important;
-    border-style: solid !important;
-    border-width: 1px !important;
-    border-color: #9EC5FE !important;
-}
-
 
 /* html attribute disabled and title don't work together, sets the pointer-event to auto in order to see the title toolip */
 .btn:disabled {
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index b339c12fc..ece6141b8 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -136,13 +136,7 @@ export default {
 		},
 		overlayStyle() {
 			return {
-				'background-color': '#F5E9D7',
-				'position': 'absolute',
-				'pointer-events': 'none',
-				'z-index': 2,
 				height:  this.getDayTimePercent + '%',
-				opacity: 0.5,
-				overflow: 'hidden'
 			}
 		},
 		pageHeaderStyle() {
@@ -178,7 +172,7 @@ export default {
 				'padding-left': '3.5rem',
 				'margin-top': '-1px',
 				'z-index': 2,
-				'border-color': '#00649C!important',
+				'border-color': 'var(--fhc-border)',
 				top: this.hourPosition + 'px',
 				left: 0,
 				right: 0,
@@ -190,14 +184,7 @@ export default {
 		},
 		curIndicatorStyle() {
 			return {
-				'pointer-events': 'none',
-				'padding-left': '7rem',
-				'margin-top': '-1px',
-				'z-index': 2,
-				'border-color': '#00649C!important',
 				top:  this.getDayTimePercent + '%',
-				left: 0,
-				right: 0,
 			}
 		},
 		noEventsCondition() {
@@ -280,8 +267,7 @@ export default {
 			}
 
 			if(this.date.compare(this.todayDate)) {
-				styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
-				styleObj['border-color'] = '#E8E8E8';
+				styleObj['backgroundImage'] = 'linear-gradient(to bottom, var(--calendar-past) '+this.getDayTimePercent+'%, transparent '+this.getDayTimePercent+'%)'
 				// styleObj.opacity = 0.5; // would opaque the whole column
 			}
 
@@ -390,7 +376,7 @@ export default {
 	<div class="fhc-calendar-day-page h-100">
 		<div class="row m-0 h-100">
 			<div style="overflow:auto" class="col-12 col-xl-6 p-0 h-100">
-				<div class="d-flex flex-column h-100">
+				<div class="d-flex flex-column h-100 border">
 					<div ref="header" class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle">
 						<div type="button" class="flex-grow-1" :title="dayText.heading" @click.prevent="changeToMonth(day)">
 							<div class="fw-bold">{{dayText.tag}}</div>
@@ -432,16 +418,16 @@ export default {
 
 
 							<div >
-								<h1 v-if="noEventsCondition" class="m-0 text-secondary" ref="noEventsText" :style="noLvStyle">{{ $p.t('lehre/noLvFound') }}</h1>
+								<h1 v-if="noEventsCondition" class="m-0 bs-body" ref="noEventsText" :style="noLvStyle">{{ $p.t('lehre/noLvFound') }}</h1>
 								<div class="events position-relative" :class="{'fhc-calendar-no-events-overlay':noEventsCondition}" ref="events" @mousemove="calcHourPosition" @mouseleave="hourPosition = null">
 									<Transition>
 										<div v-if="hourPosition && !noEventsCondition" class="position-absolute border-top small"  :style="indicatorStyle">
-											<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
+											<span class="border border-top-0 px-2">{{hourPositionTime}}</span>
 										</div>
 									</Transition>
 									<Transition>
-										<div v-if="lookingAtToday && !noEventsCondition" class="position-absolute border-top small"  :style="curIndicatorStyle">
-											<span class="border border-top-0 px-2 bg-white">{{curTime}}</span>
+										<div v-if="lookingAtToday && !noEventsCondition" class="curTimeIndicator border-top small"  :style="curIndicatorStyle">
+											<span class="border border-top-0 px-2">{{curTime}}</span>
 										</div>
 									</Transition>
 									<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
@@ -450,7 +436,7 @@ export default {
 									</div>
 									<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
 										
-										<div v-if="lookingAtToday && !noEventsCondition" :style="overlayStyle"></div>
+										<div v-if="lookingAtToday && !noEventsCondition" class="overlay" :style="overlayStyle"></div>
 										<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" v-contrast 
 											:selected="event.orig == selectedEvent" class="fhc-entry mx-2 small rounded overflow-hidden" >
 											<!-- desktop version of the page template, parent receives slotProp mobile = false -->
diff --git a/public/js/components/Calendar/Month/Page.js b/public/js/components/Calendar/Month/Page.js
index 2cdf8b21d..3f9d9ad67 100644
--- a/public/js/components/Calendar/Month/Page.js
+++ b/public/js/components/Calendar/Month/Page.js
@@ -123,7 +123,7 @@ export default {
 			if(day.getDate() === this.todayDate.getDate() 
 				&& day.getMonth() === this.todayDate.getMonth() 
 				&& day.getFullYear() === this.todayDate.getFullYear()) {
-				styleObj['background-color'] = '#00649c'; // fh blau
+				styleObj['background-color'] = 'var(--fhc-primary)'; 
 				styleObj.color = 'white';
 			}
 			
@@ -137,8 +137,8 @@ export default {
 	},
 	template: /*html*/`
 	<div class="fhc-calendar-month-page" :class="{'show-weeks': showWeeks}">
-		<div v-if="showWeeks" class=" bg-light fw-bold border-top border-bottom text-center"></div>
-		<div v-for="day in weeks[0].days" :key="day" class="bg-light fw-bold border-top border-bottom text-center">
+		<div v-if="showWeeks" class=" fw-bold border-top border-bottom text-center"></div>
+		<div v-for="day in weeks[0].days" :key="day" class=" fw-bold border-top border-bottom text-center">
 			{{dayText[day]}}
 		</div>
 		<template v-for="week in weeks"
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 1fe82ff0e..b7705b1ed 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -63,6 +63,11 @@ export default {
 			const now = new Date();
 			return String(now.getHours()).padStart(2, '0') + ':' + String(now.getMinutes()).padStart(2, '0');
 		},
+		curIndicatorStyle() {
+			return {
+				top: this.getDayTimePercent + '%',
+			}
+		},
 		pageHeaderStyle(){
 			return {
 				'z-index': 4,
@@ -74,27 +79,11 @@ export default {
 		},
 		overlayStyle() {
 			return {
-				'background-color': '#F5E9D7',
-				'position': 'absolute',
-				'pointer-events': 'none',
-				'z-index': 2,
 				height:  this.getDayTimePercent + '%',
 				width: this.laneWidth + 'px',
-				opacity: 0.5
-			}
-		},
-		indicatorStyle() {
-			return {
-				'pointer-events': 'none',
-				'padding-left': '3.5rem',
-				'margin-top': '-1px',
-				'z-index': 2,
-				'border-color': '#00649C!important',
-				top: this.hourPosition + 'px',
-				left: 0,
-				right: 0,
 			}
 		},
+		
 		hours(){
 			// returns an array with elements starting at 7 and ending at 24
 			return [...Array(24).keys()].filter(hour => hour >= 7 && hour <= 24);
@@ -171,16 +160,16 @@ export default {
 				d.getDate() === this.todayDate.getDate()
 			)
 		},
-		curIndicatorStyle() {
-
+		indicatorStyle() {
 			return {
 				'pointer-events': 'none',
-				'padding-left': '1rem',
+				'padding-left': '3.5rem',
 				'margin-top': '-1px',
 				'z-index': 2,
-				'border-color': '#00649C!important',
-				top: this.getDayTimePercent + '%',
-				width: this.laneWidth + 'px'
+				'border-color': 'var(--fhc-border)',
+				top: this.hourPosition + 'px',
+				left: 0,
+				right: 0,
 			}
 		},
 		getDayTimePercent() {
@@ -211,14 +200,12 @@ export default {
 				'grid-template-rows': 'repeat(' + (this.hours.length * 60 / this.smallestTimeFrame) + ', 1fr)',
 			}
 			if(day.isPast) {
-				styleObj['background-color'] = '#F5E9D7'
-				styleObj['border-color'] = '#E8E8E8';
-				styleObj.opacity = 0.5;
+				//styleObj['background-color'] = 'var(--calendar-past)'
+				styleObj['border-color'] = 'var(--fhc-border)';
 			} else if (day.isToday) {
 				
-				styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
-				styleObj['border-color'] = '#E8E8E8';
-				styleObj.opacity = 0.5;
+				//styleObj['backgroundImage'] = 'linear-gradient(to bottom, var(--calendar-past) '+this.getDayTimePercent+'%, transparent '+this.getDayTimePercent+'%)'
+				styleObj['border-color'] = 'var(--fhc-border)';
 			}
 			
 			return styleObj
@@ -335,7 +322,7 @@ export default {
 	},
 	template: /*html*/`
 	<div ref="page" class="fhc-calendar-week-page" style="min-width: 700px;">
-		<div class="d-flex flex-column">
+	<div class="d-flex flex-column">
 			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
 				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToDay(day)">
 					<div class="fw-bold">{{dayText[day]?.tag}}</div>
@@ -357,7 +344,7 @@ export default {
 								:style="{'background-color': event?.color, 'margin-bottom':'1px'}"
 								class="d-grid m-1 small rounded overflow-hidden fhc-entry"
 								v-contrast
-								>		
+								>
 								<slot class="p-1" name="weekPage" :event="event" :day="day">
 									<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>
 								</slot>
@@ -366,22 +353,22 @@ export default {
 					</div>
 				</div>
 				<div class="events position-relative" :ref="'eventsRef'+week" @mousemove="calcHourPosition" @mouseleave="hourPosition = null">
-					<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour"  class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
+					<div :id="hourGridIdentifier(hour)" v-for="hour in hours" :key="hour" class="position-absolute box-shadow-border" :style="hourGridStyle(hour)"></div>
 					<Transition>
-						<div v-if="hourPosition" class="position-absolute border-top small"  :style="indicatorStyle">
-							<span class="border border-top-0 px-2 bg-white">{{hourPositionTime}}</span>
+						<div v-if="hourPosition" class="fhc-calendar-hour-indicator position-absolute small" :style="indicatorStyle" >
+							<span class=" border border-top-0 px-2 ">{{hourPositionTime}}</span>
 						</div>
 					</Transition>
 					<div class="hours">
 						<div v-for="hour in hours" :style="getGridStyle" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 					</div>
-					<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" class=" day border-start position-relative" :style="dayGridStyle(day)">
+					<div v-for="(day,dayindex) in eventsPerDayAndHour" :key="day" :class="{'past':day.isPast}" class=" day border-start position-relative" :style="dayGridStyle(day)">
 						<Transition>
-							<div v-if="day.isToday" class="position-absolute border-top small"  :style="curIndicatorStyle">
-								<span class="border border-top-0 px-2 bg-white">{{curTime}}</span>
+							<div v-if="day.isToday" class="border-top small curTimeIndicator" :style="curIndicatorStyle">
+								<span class="fhc-body-bg border border-top-0 px-2">{{curTime}}</span>
 							</div>
 						</Transition>
-						<div v-if="day.isToday" :style="overlayStyle"></div>
+						<div v-if="day.isToday" class="overlay" :style="overlayStyle"></div>
 						<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" 
 						:selected="event.orig == selectedEvent"
 						:style="eventGridStyle(day,event)"
diff --git a/public/js/components/Cis/Cms/Content.js b/public/js/components/Cis/Cms/Content.js
index d657322ba..90fb095f0 100644
--- a/public/js/components/Cis/Cms/Content.js
+++ b/public/js/components/Cis/Cms/Content.js
@@ -88,7 +88,9 @@ export default {
 	},
 	template: /*html*/ `
     <!-- div that contains the content -->
-    <component ref="content" :is="computeContentType" v-if="content" :content="content" :content_id="content_id_internal" />
+	<div id="fhc-cms-content" v-if="content">
+    	<component ref="content" :is="computeContentType" :content="content" :content_id="content_id_internal" />
+	</div>
     <p v-else>No content is available to display</p>
     `,
 };
diff --git a/public/js/components/Cis/Cms/Content_types/General.js b/public/js/components/Cis/Cms/Content_types/General.js
index 692843e3e..85716ef43 100644
--- a/public/js/components/Cis/Cms/Content_types/General.js
+++ b/public/js/components/Cis/Cms/Content_types/General.js
@@ -85,26 +85,36 @@ export default {
                 .then(() => {
                   Axios.get(el.href)
                     .then((res) => {
-                      // TODO(chris): check for success then show message and/or reload
-                      location = location;
+                    	// TODO(chris): check for success then show message and/or reload
+                    	location = location;
                     })
                     .catch((err) => console.error("ERROR:", err));
                 })
                 .catch(() => {});
             });
           });
-          document.querySelectorAll("#cms [data-href]").forEach((el) => {
+        document.querySelectorAll("#cms [data-href]").forEach((el) => {
             el.href = el.dataset.href.replace(
-              /^ROOT\//,
-              FHC_JS_DATA_STORAGE_OBJECT.app_root
+            	/^ROOT\//,
+            	FHC_JS_DATA_STORAGE_OBJECT.app_root
             );
-          });
+        });
 			
-			document.querySelectorAll("[href]").forEach((element) => {
-				let orignal_href = element.getAttribute("href");
-				let new_href = replaceRelativeLegacyLink(orignal_href);
-				element.href = new_href;
-			});
+		document.querySelectorAll("[href]").forEach((element) => {
+			let orignal_href = element.getAttribute("href");
+			let new_href = replaceRelativeLegacyLink(orignal_href);
+			element.href = new_href;
+		});
+
+		document.querySelectorAll("[style*=background-color]").forEach((element) => {
+			if (element.style.backgroundColor == "rgb(255, 255, 255)"){
+				element.style.backgroundColor = "var(--fhc-background)";
+			}
+			if(element.querySelector("*[style*=background-color]")){
+				element.style.backgroundColor = "var(--fhc-secondary)";
+			}
+		});
+
     },
     template: /*html*/ `
       <!-- div that contains the content -->
diff --git a/public/js/components/Cis/Cms/News.js b/public/js/components/Cis/Cms/News.js
index 1567cbef4..81d26e6c5 100644
--- a/public/js/components/Cis/Cms/News.js
+++ b/public/js/components/Cis/Cms/News.js
@@ -80,7 +80,7 @@ export default {
 	<hr/>
 	<pagination v-show="content?true:false" :page_size="page_size"  @page="page=$event.page; loadNewPageContent($event)" :maxPageCount="maxPageCount">
 	</pagination>
-	<div class="container-fluid">
+	<div class="container-fluid mt-4">
 		<div class="row">
 			<div class="col" v-html="content">
 			</div>
diff --git a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
index 30e6ecb6a..c984b46eb 100644
--- a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
+++ b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
@@ -26,7 +26,7 @@ components:{
 	StudiengangVertretung,
 },
 template:/*html*/`
-
+		<div id="fhc-studiengang-informationen">
 		<template v-if="studiengang?.bezeichnung && semester">
 			<div class="card card-body mb-3">
 				<div class="mb-1">
@@ -35,7 +35,7 @@ template:/*html*/`
 				</div>
 				<div class="mb-1">
 					<h2 class="mb-1 pb-0">Moodle:</h2>
-					<a class="mb-1" target="_blank" :href="moodleLink">{{studiengang?.kurzbzlang}}</a>
+					<a class="fhc-link-color mb-1" target="_blank" :href="moodleLink">{{studiengang?.kurzbzlang}}</a>
 				</div>
 				<div :class="{'mb-1':studiengang?.zusatzinfo_html}">
 					<h2 class="mb-1 pb-0">{{$p.t('lehre','studiensemester')}}: </h2>
@@ -72,6 +72,7 @@ template:/*html*/`
 		<template v-if="jahrgangsvertr && Array.isArray(jahrgangsvertr) && jahrgangsvertr.length >0">
 			<studiengang-vertretung :title="$p.t('studiengangInformation', 'Jahrgangsvertretung')" :vertretungsList="jahrgangsvertr"></studiengang-vertretung>
 		</template>
+		</div>
 	
 `,
 computed:{
diff --git a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangPerson.js b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangPerson.js
index 10e74ef84..3b9481013 100644
--- a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangPerson.js
+++ b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangPerson.js
@@ -20,16 +20,16 @@ export default {
 			<img  :src="base64Image" alt="mitarbeiter_foto" style="width: 110px; height: auto; object-fir:scale-down;" class="card-img-top" >
 		</div>
 		<div class="card-body">
-			<h6 class="text-center card-title mb-0">{{fullname}} <a v-if="profilViewLink" :href="profilViewLink"><i class="ms-2 fa fa-arrow-up-right-from-square" style="color:#00649C"></i></a></h6>
+			<h6 class="text-center card-title mb-0">{{fullname}} <a v-if="profilViewLink" :href="profilViewLink"><i class="ms-2 fa fa-arrow-up-right-from-square fhc-primary-color" ></i></a></h6>
 		</div>
 		<hr class="my-0">
 		<div class="card-body">
-			
+
 			<div class="flex flex-column gap-3">
 			<div class="mb-3">
 				<span>
 					<i class="fa fa-phone me-2"></i>
-					<a :href="phone.link">{{phone.number}}</a>
+					<a class="fhc-link-color" :href="phone.link">{{phone.number}}</a>
 				</span>
 			</div>
 			<div class="mb-3">
@@ -41,7 +41,7 @@ export default {
 			<div>
 				<span>
 					<i class="fa-regular fa-envelope me-2"></i>
-					<a :href="email_link" v-html="formattedEmail"></a>
+					<a class="fhc-link-color" :href="email_link" v-html="formattedEmail"></a>
 				</span>
 			</div>
 			
diff --git a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js
index abb476c19..142050e9e 100644
--- a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js
+++ b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangVertretung.js
@@ -12,7 +12,7 @@ export default {
 		<div class="card-body">
 			<p v-for="vertretung in vertretungsList">
 				<a v-if="profilViewLink(vertretung.uid)" :href="profilViewLink(vertretung.uid)">
-					<i class="me-2 fa fa-arrow-up-right-from-square" style="color:#00649C"></i>
+					<i class="me-2 fa fa-arrow-up-right-from-square fhc-primary-color" ></i>
 				</a>
 				{{vertretungFormatedName(vertretung,false)}}
 			</p>
diff --git a/public/js/components/Cis/DarkTheme.js b/public/js/components/Cis/DarkTheme.js
new file mode 100644
index 000000000..2d3192b6d
--- /dev/null
+++ b/public/js/components/Cis/DarkTheme.js
@@ -0,0 +1,51 @@
+export default {
+	data:()=>{
+		return{
+			theme:'light',
+			themes:['light','dark','purple'],
+		}
+	},
+	methods:{
+		toggleTheme(theme){
+			if(!theme) return;
+
+			for(const theme of this.themes){
+				document.documentElement.classList.remove(theme);
+			}
+			document.documentElement.classList.add(theme);
+
+			document.body.setAttribute("data-bs-theme", theme);
+
+			let stylesheet = document.querySelector('link[href*="primevue/resources/themes"]');
+			if(theme =="dark"){
+				stylesheet.attributes.href.value = stylesheet.attributes.href.value.replace("bootstrap4-light-blue", "bootstrap4-dark-blue");
+			}else if(theme =="light"){
+				stylesheet.attributes.href.value = stylesheet.attributes.href.value.replace("bootstrap4-dark-blue", "bootstrap4-light-blue");
+			} 
+
+			localStorage.setItem("theme",theme);
+			this.theme = theme;
+		}
+	},
+	computed:{
+		nextTheme(){
+			return this.themes[(this.themes.indexOf(this.theme) + 1) % this.themes.length];
+		},
+	},
+	mounted(){
+		const theme =localStorage.getItem("theme");
+		if(this.themes.includes(theme)){
+			this.theme = theme;
+		}
+		this.toggleTheme(this.theme);
+
+	},
+	template:/*html*/`
+
+	<button @click="toggleTheme(nextTheme)" class="fhc-primary-highlight-bg align-self-center btn btn-secondary rounded-5">
+		<i v-if="theme == 'light'" class="fa-solid fa-moon fhc-text"></i>
+		<i v-else-if="theme == 'dark'" class="fa-solid fa-sun fhc-text"></i>
+		<i v-else-if="theme == 'purple'" class="fa-solid fa-wine-bottle"></i>
+	</button>
+	`
+}
\ No newline at end of file
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index ebab00109..08934cc78 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -1,12 +1,14 @@
 import CisMenuEntry from "./Menu/Entry.js";
 import FhcSearchbar from "../searchbar/searchbar.js";
 import CisSprachen from "./Sprachen.js"
+import DarkTheme from "./DarkTheme.js";
 
 export default {
     components: {
         CisMenuEntry,
         FhcSearchbar,
 		CisSprachen,
+		DarkTheme,
     },
     props: {
 		rootUrl: String,
@@ -103,10 +105,15 @@ export default {
 	<button id="nav-main-btn" class="navbar-toggler rounded-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#nav-main" aria-controls="nav-main" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
-	<fhc-searchbar ref="searchbar" id="nav-search" style="background-color:var(--fhc-cis-primary)" class="fhc-searchbar w-100 py-1 py-lg-2" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
-    <a id="nav-logo" class="d-none d-lg-block" :href="rootUrl">
-        <img :src="logoUrl" alt="Logo">
-    </a>
+	<fhc-searchbar ref="searchbar" id="nav-search" class="fhc-searchbar w-100 py-1 py-lg-2" :searchoptions="searchbaroptions" :searchfunction="searchfunction"></fhc-searchbar>
+    <div id="nav-logo" class="d-none d-lg-block">
+		<div class="d-flex h-100">
+			<a :href="rootUrl">
+				<img :src="logoUrl" alt="Logo">
+			</a>
+			<dark-theme></dark-theme>
+		</div>
+    </div>
 	<div id="nav-user">
 		<button id="nav-user-btn" class="btn btn-link rounded-0" type="button" data-bs-toggle="collapse" data-bs-target="#nav-user-menu" aria-expanded="false" aria-controls="nav-user-menu">
 			<img :src="avatarUrl" class="bg-dark avatar rounded-circle border border-dark"/>
@@ -115,19 +122,19 @@ export default {
 		@[\`shown.bs.collapse\`]="handleShowNavUser"
 		@[\`hide.bs.collapse\`]="handleHideNavUser"
 		id="nav-user-menu" class="top-100 end-0 collapse list-unstyled" aria-labelledby="nav-user-btn">
-			<li class="btn-level-2"><a class="btn btn-level-2 rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
-			<li class="btn-level-2">
+			<li><a class="fhc-dark-bg btn rounded-0 d-block" :href="site_url + '/Cis/Profil'" id="menu-profil">Profil</a></li>
+			<li >
 				<cis-sprachen @languageChanged="fetchMenu"></cis-sprachen>
 			</li>
-			<li class="btn-level-2"><hr class="dropdown-divider m-0 "></li>
-			<li><a class="btn btn-level-2 rounded-0 d-block" :href="logoutUrl">Logout</a></li>
+			<li><hr class="dropdown-divider m-0 "></li>
+			<li ><a class="fhc-dark-bg btn rounded-0 d-block" :href="logoutUrl">Logout</a></li>
 		</ul>
 	</div>
-    <nav id="nav-main" class="offcanvas offcanvas-start bg-dark" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
+    <nav id="nav-main" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="nav-main-btn" data-bs-backdrop="false">
 		<div id="nav-main-sticky">
-			<div id="nav-main-toggle" class="position-static d-none d-lg-block bg-dark">
-				<button type="button" class="btn bg-dark text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target=".nav-menu-collapse" aria-expanded="true" aria-controls="nav-sprachen nav-main-menu">
-					<i class="fa fa-arrow-circle-left"></i>
+			<div id="nav-main-toggle" class="position-static d-none d-lg-block ">
+				<button type="button" class="btn text-light rounded-0 p-1 d-flex align-items-center" data-bs-toggle="collapse" data-bs-target=".nav-menu-collapse" aria-expanded="true" aria-controls="nav-sprachen nav-main-menu">
+					<i class="fa fa-arrow-circle-left fhc-text"></i>
 				</button>
 			</div>
 			<div class="offcanvas-body p-0">
diff --git a/public/js/components/Cis/Mylv/LvInfo.js b/public/js/components/Cis/Mylv/LvInfo.js
index 514e34779..f8ef0dd70 100644
--- a/public/js/components/Cis/Mylv/LvInfo.js
+++ b/public/js/components/Cis/Mylv/LvInfo.js
@@ -115,7 +115,7 @@ export default {
 							:''
 						}}</th>
 						<td>
-							<a v-if="event.ort_content_id" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
+							<a v-if="event.ort_content_id" :href="getOrtContentLink"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
 							{{event.ort_kurzbz}}
 						</td>
 					</tr>
@@ -135,7 +135,7 @@ export default {
 						}}</th>
 						<td>
 							<div v-for="lektor in event.lektor" class="d-block">
-								<a v-if="lektorenLinks[lektor.kurzbz]" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
+								<a v-if="lektorenLinks[lektor.kurzbz]" :href="lektorenLinks[lektor.kurzbz]"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
 								{{lektor.kurzbz}}
 							</div>
 						</td>
diff --git a/public/js/components/Cis/Mylv/LvMenu.js b/public/js/components/Cis/Mylv/LvMenu.js
index fc6a3a723..d554b0e95 100644
--- a/public/js/components/Cis/Mylv/LvMenu.js
+++ b/public/js/components/Cis/Mylv/LvMenu.js
@@ -63,7 +63,7 @@ export default {
 				<div style="min-height:150px; min-width:150px;" class="col-12 col-lg-6 col-xl-4" v-for="(menuItem, index) in menu" :key="index">
 					<a :id="menuItem.name" :class="{'dropdown-toggle':menuItem.c4_moodle_links?.length }"  role="button" :href="c4_link(menuItem)"
 					:disabled="c4_disabled(menuItem)" :data-bs-toggle="menuItem.c4_moodle_links?.length?'dropdown':null"
-					class="menu-entry p-2 w-100 text-wrap border border-1 rounded-3 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link-dark h-100">
+					class="menu-entry p-2 w-100 text-wrap border border-1 rounded-3 d-flex flex-column align-items-center justify-content-center text-center text-decoration-none link h-100">
 						<img :src="menuItem.c4_icon" :alt="menuItem.name" />
 						<p @click="selectMenu(menuItem)" class="w-100 mt-2">{{menuItem.name}}</p>
 						<p v-for="([text,link],index) in menuItem.c4_linkList" @click.stop="selectMenu(menuItem,index)" class="mt-1 w-100" :index="index">{{text}}</p>
diff --git a/public/js/components/Cis/Mylv/RoomInformation.js b/public/js/components/Cis/Mylv/RoomInformation.js
index 8a7354305..379f60498 100644
--- a/public/js/components/Cis/Mylv/RoomInformation.js
+++ b/public/js/components/Cis/Mylv/RoomInformation.js
@@ -219,25 +219,25 @@ const RoomInformation = {
 				</span>
 			</template>
 			<template #weekPage="{event,day}">
-				<div @click="showModal(event?.orig)" type="button" class=" border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
-					<span>{{event?.orig.topic}}</span>
-					<span v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</span>
-					<span>{{event?.orig.ort_kurzbz}}</span>
+				<div @click="showModal(event)" type="button" class=" border border-secondary border d-flex flex-column align-items-center justify-content-evenly h-100">
+					<span>{{event?.topic}}</span>
+					<span v-for="lektor in event?.lektor">{{lektor.kurzbz}}</span>
+					<span>{{event?.ort_kurzbz}}</span>
 				</div>
 			</template>
 			<template #dayPage="{event,day,mobile}">
-				<div @click="mobile? showModal(event?.orig):null" type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
+				<div @click="mobile? showModal(event):null" type="button" class="fhc-entry border border-secondary border row h-100 justify-content-center align-items-center text-center">
 					<div class="col ">
 						<p>{{ $p.t('lehre/lehrveranstaltung') }}:</p>
-						<p class="m-0">{{event?.orig.topic}}</p>
+						<p class="m-0">{{event?.topic}}</p>
 					</div>
 					<div class="col ">
 						<p>{{ $p.t('lehre/lektor') }}:</p>
-						<p class="m-0" v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</p>
+						<p class="m-0" v-for="lektor in event?.lektor">{{lektor.kurzbz}}</p>
 					</div>
 					<div class="col ">
 						<p>{{ $p.t('profil/Ort') }}: </p>
-						<p class="m-0">{{event?.orig.ort_kurzbz}}</p>
+						<p class="m-0">{{event?.ort_kurzbz}}</p>
 					</div>
 				</div>
 			</template>
diff --git a/public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js b/public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js
index c0129d1d1..cb05e7fe4 100644
--- a/public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js
+++ b/public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js
@@ -48,11 +48,11 @@ export default {
 			// returns a suitable color for the given grade
 			if (this.positiv)
 			{
-				return 'var(--fhc-cis-grade-positive)';
+				return 'var(--fhc-success)';
 			}
 			else
 			{
-				return 'var(--fhc-cis-grade-negative)';
+				return 'var(--fhc-danger)';
 			}
 		},
 		is_organisatorische_einheit(){
@@ -179,9 +179,9 @@ export default {
 								<i :class="[menuItem.c4_icon2 ? menuItem.c4_icon2 : 'fa-solid fa-pen-to-square', !menuItem.c4_link ? 'unavailable' : null ]"></i>
 							</div>
 							<a
-							class="text-decoration-none text-truncate"
+							class="fhc-body text-decoration-none text-truncate"
 							:id="'moodle_links_'+lehrveranstaltung_id"
-							:class="{'link-dark':menuItem.c4_link, 'unavailable':!menuItem.c4_link, 'dropdown-toggle':menuItem.c4_moodle_links?.length }"
+							:class="{ 'unavailable':!menuItem.c4_link, 'dropdown-toggle':menuItem.c4_moodle_links?.length }"
 							:target="menuItem.c4_target"
 							:href="c4_link(menuItem) ? c4_link(menuItem) : null">
 								{{ menuItem.phrase ? $p.t(menuItem.phrase) : menuItem.name}}
diff --git a/public/js/components/Cis/Mylv/Semester/Studiengang/Lv/Info.js b/public/js/components/Cis/Mylv/Semester/Studiengang/Lv/Info.js
index 2c0f7f044..9e0eb4a0c 100644
--- a/public/js/components/Cis/Mylv/Semester/Studiengang/Lv/Info.js
+++ b/public/js/components/Cis/Mylv/Semester/Studiengang/Lv/Info.js
@@ -114,7 +114,7 @@ export default {
 							<td>
 								<ul v-if="lektorNames.length" class="list-unstyled mb-0">
 									<li v-for="name in new Set(lektorNames)" :key="name">
-									<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
+									<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
 										{{name}}
 									</li>
 								</ul>
@@ -128,7 +128,7 @@ export default {
 							<td>
 								<ul class="list-unstyled mb-0">
 									<li v-for="name in lvLeitung" :key="name">
-										<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a>
+										<a :href="lektorNamesLinks[name]?lektorNamesLinks[name]:null"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a>
 										{{name}}
 									</li>
 								</ul>
diff --git a/public/js/components/Cis/Profil/ProfilComponents/Adresse.js b/public/js/components/Cis/Profil/ProfilComponents/Adresse.js
index 996cdfb87..5ba2f1fe7 100644
--- a/public/js/components/Cis/Profil/ProfilComponents/Adresse.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/Adresse.js
@@ -19,7 +19,7 @@ export default {
     
         <!-- column 1 in the address row -->
         <div class="col-1 text-center">
-            <i class="fa fa-location-dot fa-lg" style="color:#00649C "></i>
+            <i class="fa fa-location-dot fa-lg fhc-link-color" ></i>
         </div>
         
         <div  class="col-11 col-sm-8 col-xl-11 col-xxl-8 order-1">
diff --git a/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js b/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js
index 4c7411cdf..e75696a4d 100644
--- a/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js
@@ -174,9 +174,9 @@ export default {
                                         <div  class="align-middle text-center"><i role="button" @click="showEditProfilModal(item)" class="fa fa-eye"></i></div>
                                     </template>
                                     <template v-else >
-                                        <div class="align-middle text-center" ><i style="color:#00639c" @click="showEditProfilModal(item)" role="button" class="fa fa-edit"></i></div>
+                                        <div class="align-middle text-center" ><i  @click="showEditProfilModal(item)" role="button" class="fa fa-edit fhc-primary-color"></i></div>
                                     </template>
-                                    <div class="align-middle text-center"><i style="color:red" role="button" @click="deleteRequest(item)" class="fa fa-trash"></i></div>
+                                    <div class="align-middle text-center"><i role="button" @click="deleteRequest(item)" class="text-danger fa fa-trash"></i></div>
                                 </div>
                             </td>
                         </template>          
diff --git a/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js b/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js
index 704e5a1ef..3d703f6b6 100644
--- a/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/Kontakt.js
@@ -14,7 +14,7 @@ export default{
     template:/*html*/`
     <div class="gy-2 row align-items-center justify-content-center">
         <div class="col-1 text-center" >
-            <i class="fa-solid " :class="{...(data.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" style="color:rgb(0, 100, 156)"></i>
+            <i class="fa-solid fhc-link-color" :class="{...(data.kontakt.includes('@')?{'fa-envelope':true}:{'fa-phone':true})}" ></i>
         </div>
         <div :class="{...(data.anmerkung? {'col-11':true, 'col-md-6':true, 'col-xl-11':true, 'col-xxl-6':true} : {'col-10':true, 'col-xl-9':true, 'col-xxl-10':true})}">
             <!-- rendering KONTAKT emails -->
diff --git a/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js b/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js
index 82b0aad57..cf2bc22e3 100644
--- a/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/Mailverteiler.js
@@ -20,10 +20,10 @@ export default {
                 <div class="col-12 ">
                     <div class="row">  
                         <div class="col-1 ">
-                            <i class="fa-solid fa-envelope" style="color: #00649C;"></i>
+                            <i class="fa-solid fa-envelope fhc-link-color" ></i>
                         </div>
                         <div class="col">
-                            <a :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
+                            <a class="fhc-link-color" :href="verteiler.mailto"><b>{{verteiler.gruppe_kurzbz}}</b></a>
                         </div>
                     </div>
                 </div> 
diff --git a/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js b/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js
index 43ef807ba..1342aed8e 100644
--- a/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/ProfilEmails.js
@@ -22,7 +22,7 @@ export default {
             <div v-for="email in data" class="col-12 ">
                 <div class="row align-items-center">
                     <div class="col-1 text-center">
-                        <i class="fa-solid fa-envelope" style="color:rgb(0, 100, 156)"></i>
+                        <i class="fa-solid fa-envelope fhc-link-color" ></i>
                     </div>
                     <div class="col-11">
                         <div class="form-underline">
diff --git a/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js b/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js
index e49fa624a..2e2ec0c6e 100644
--- a/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/RoleInformation.js
@@ -49,7 +49,7 @@ export default {
 						<span v-else-if="key == 'semester' && entry.value"  class="form-underline-content">
 							{{ entry.value }}
 							<a class="ms-auto mb-2" target="_blank" :href="getLinkSemesterListe">
-								<i class="fa fa-arrow-up-right-from-square me-1"></i>
+								<i class="fa fa-arrow-up-right-from-square me-1 fhc-link-color"></i>
 							</a>
 						</span>
 						
@@ -57,7 +57,7 @@ export default {
 						<span v-else-if="key =='verband' && entry.value"  class="form-underline-content">
 							{{ entry.value }}
 							<a class="ms-auto mb-2" target="_blank" :href="getLinkVerbandListe">
-								<i class="fa fa-arrow-up-right-from-square me-1"></i>
+								<i class="fa fa-arrow-up-right-from-square me-1 fhc-link-color"></i>
 							</a>
 						</span>
 						
@@ -65,7 +65,7 @@ export default {
 						<span v-else-if="key == 'gruppe' && entry.value"  class="form-underline-content">
 							{{ entry.value }}
 							<a class="ms-auto mb-2" target="_blank" :href="getLinkGruppeListe">
-								<i class="fa fa-arrow-up-right-from-square me-1"></i>
+								<i class="fa fa-arrow-up-right-from-square me-1 fhc-link-color"></i>
 							</a>
 						</span>
 						
diff --git a/public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js b/public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js
index c30f1ab89..05e08cefe 100644
--- a/public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js
+++ b/public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js
@@ -248,7 +248,7 @@ export default {
                 this.profilUpdateStates["Pending"];
 
               let html = `<div class="d-flex justify-content-evenly align-items-center">
-                <button class="btn border-primary border-2" id="showButton"><i class="fa-solid fa-eye" style="color: #0d6efd;"></i></button>
+                <button class="btn border-primary border-2" id="showButton"><i class="fa-solid fa-eye fhc-primary-color"></i></button>
                 ${
                   STATUS_PENDING ?
                   `<button class="btn border-success border-2" id="acceptButton"><i class='fa fa-lg fa-circle-check text-success'></i></button>
diff --git a/public/js/components/Cis/Raumsuche/Raumsuche.js b/public/js/components/Cis/Raumsuche/Raumsuche.js
index a86c3825b..94507fa73 100644
--- a/public/js/components/Cis/Raumsuche/Raumsuche.js
+++ b/public/js/components/Cis/Raumsuche/Raumsuche.js
@@ -76,7 +76,7 @@ export default {
 			const val = cell.getValue()
 			if(val) {
 				return '<div style="display: flex; justify-content: center; align-items: center; height: 100%">' +
-				'<a href="'+val+'"><i class="fa fa-arrow-up-right-from-square me-1" style="color:#00649C"></i></a></div>'
+				'<a href="'+val+'"><i class="fa fa-arrow-up-right-from-square me-1 fhc-primary-color" ></i></a></div>'
 			} else {
 				return '<div style="display: flex; justify-content: center; align-items: center; height: 100%">' +
 					'-</div>'
diff --git a/public/js/components/Cis/Sprachen.js b/public/js/components/Cis/Sprachen.js
index fd53d06db..d5e2f827a 100644
--- a/public/js/components/Cis/Sprachen.js
+++ b/public/js/components/Cis/Sprachen.js
@@ -23,7 +23,7 @@ export default {
 	template:/*html*/`
 	<div class="container">
 		<div class="row justify-content-center align-items-center flex-nowrap overflow-hidden">
-			<button v-for="lang in allActiveLanguages" @click.prevent="changeLanguage(lang.sprache)" class="col text-white sprachen-entry btn text-center w-100" :selected="$p.user_language.value==lang.sprache">{{lang.bezeichnung}}</button>
+			<button v-for="lang in allActiveLanguages" @click.prevent="changeLanguage(lang.sprache)" class="col fhc-text sprachen-entry btn text-center w-100" :selected="$p.user_language.value==lang.sprache">{{lang.bezeichnung}}</button>
 		</div>
 	</div>
 	`,
diff --git a/public/js/components/DashboardWidget/Ampel.js b/public/js/components/DashboardWidget/Ampel.js
index 925942079..e611af5db 100644
--- a/public/js/components/DashboardWidget/Ampel.js
+++ b/public/js/components/DashboardWidget/Ampel.js
@@ -191,7 +191,7 @@ export default {
 					</div>
 				</div>
 				<div class="col">
-					<button class="btn btn-light w-100" @click="filter = ''">
+					<button class="btn fhc-tertiary w-100" @click="filter = ''">
 						<small :class="{'fw-bold':filter===''}">{{$p.t('ui','alle')}}: <b>{{ count.alle }}</b></small>
 					</button>
 				</div>
diff --git a/public/js/components/DashboardWidget/Stundenplan.js b/public/js/components/DashboardWidget/Stundenplan.js
index 437f6a17f..42f8dfa0e 100644
--- a/public/js/components/DashboardWidget/Stundenplan.js
+++ b/public/js/components/DashboardWidget/Stundenplan.js
@@ -187,8 +187,8 @@ export default {
 						<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 					</div>
 					<template v-else-if="allEventsGrouped.size" v-for="([key, value], index) in allEventsGrouped" :key="index" style="margin-top: 8px;">
-						<div class="card-header d-grid p-0">
-							<button class="btn btn-link link-secondary text-decoration-none" @click="setCalendarMaximized">{{ key.format({dateStyle: "full"}, $p.user_locale.value)}}</button>
+						<div class=" card-header d-grid p-0">
+							<button class="btn fhc-tertiary text-decoration-none" @click="setCalendarMaximized">{{ key.format({dateStyle: "full"}, $p.user_locale.value)}}</button>
 						</div>
 						<div role="button" @click="showLvUebersicht(evt)" v-for="evt in value" :key="evt.id" class="list-group-item small" :style="getEventStyle(evt)">
 							<template v-if="evt.type=='moodle'">
diff --git a/public/js/components/DashboardWidget/Url.js b/public/js/components/DashboardWidget/Url.js
index 7f836bf1c..2910f08d9 100644
--- a/public/js/components/DashboardWidget/Url.js
+++ b/public/js/components/DashboardWidget/Url.js
@@ -175,8 +175,8 @@ export default {
 								<i class="fa fa-edit me-1"></i>
 							</a>
 							<!--DELETE BOOKMARK-->
-							<a href="#" @click.prevent="removeLink(link.bookmark_id)" v-show="configMode || editModeIsActive">
-								<i class="fa fa-regular fa-trash-can" style="color: #e01b24;"></i>
+							<a id="deleteBookmark" href="#" @click.prevent="removeLink(link.bookmark_id)" v-show="configMode || editModeIsActive">
+								<i class="fa fa-regular fa-trash-can"></i>
 							</a>
 						</div>
 					</div>
diff --git a/public/js/components/searchbar/searchbar.js b/public/js/components/searchbar/searchbar.js
index 7b28c8bea..fa17bc8a2 100644
--- a/public/js/components/searchbar/searchbar.js
+++ b/public/js/components/searchbar/searchbar.js
@@ -33,14 +33,14 @@ export default {
     template: /*html*/`
           <form ref="searchform" class="d-flex me-3" :class="searchoptions.cssclass" action="javascript:void(0);"
 		 	 @focusin="this.searchfocusin" @focusout="this.searchfocusout">
-			<div ref="searchbox" class="h-100 input-group me-2 bg-white">
-				<span style="background-color:inherit" class="input-group-text">
+			<div ref="searchbox" class="h-100 input-group me-2">
+				<span class="input-group-text">
 					<i class="fa-solid fa-magnifying-glass"></i>
 				</span>
                 <input @keyup="this.search" @focus="this.showsearchresult"
                     v-model="this.searchsettings.searchstr" class="form-control"
                     type="search" :placeholder="'Search: '+ search_types_string" aria-label="Search">
-                <button data-bs-toggle="collapse" data-bs-target="#searchSettings" aria-expanded="false" aria-controls="searchSettings" ref="settingsbutton"  class="btn btn-outline-secondary" type="button" id="search-filter"><i class="fas fa-cog"></i></button>
+                <span data-bs-toggle="collapse" data-bs-target="#searchSettings" aria-expanded="false" aria-controls="searchSettings" ref="settingsbutton"  class="input-group-text" type="button"><i class="fas fa-cog"></i></span>
             </div>
 
             <div v-show="this.showresult"
diff --git a/public/js/helpers/ColorThemeSetting.js b/public/js/helpers/ColorThemeSetting.js
new file mode 100644
index 000000000..fb3c94b8e
--- /dev/null
+++ b/public/js/helpers/ColorThemeSetting.js
@@ -0,0 +1,5 @@
+let theme = localStorage.getItem("theme");
+if (theme == 'dark') {
+	document.body.setAttribute("data-bs-theme", theme); 
+	document.documentElement.classList.add('dark');
+}
\ No newline at end of file