diff --git a/application/config/theme.php b/application/config/theme.php
new file mode 100644
index 000000000..f16482bea
--- /dev/null
+++ b/application/config/theme.php
@@ -0,0 +1,10 @@
+<?php
+
+if (! defined('BASEPATH')) exit('No direct script access allowed');
+
+
+// changing the color theme
+
+$config['theme_name']='default';
+$config['theme_css']= "public/css/theme/default.css";
+$config['theme_modes']=['light','dark'];
\ No newline at end of file
diff --git a/application/helpers/hlp_header_helper.php b/application/helpers/hlp_header_helper.php
index 3825acc75..cbc1319c7 100644
--- a/application/helpers/hlp_header_helper.php
+++ b/application/helpers/hlp_header_helper.php
@@ -88,6 +88,7 @@ function generateCSSsInclude($CSSs)
 function generateJSDataStorageObject($indexPage, $calledPath, $calledMethod)
 {
 	$ci =& get_instance();
+	$ci->load->config('theme');
 	$ci->load->model('system/Sprache_model','SpracheModel');
 	$server_language = getData($ci->SpracheModel->loadWhere(['content' => true]));
 	$server_language = array_map(function($language){
@@ -107,6 +108,10 @@ function generateJSDataStorageObject($indexPage, $calledPath, $calledMethod)
 		'user_language' => $user_language,
 		'timezone' => date_default_timezone_get(),
 		'systemerror_mailto' => $systemerror_mailto,
+		'theme' => [
+			'name'=>$ci->config->item('theme_name'),
+			'modes'=>$ci->config->item('theme_modes'),
+		]
 	);
 
 	$toPrint = "\n";
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 6a3cc5a9a..0ec44c047 100644
--- a/application/views/lehre/anrechnung/requestAnrechnungImportant.php
+++ b/application/views/lehre/anrechnung/requestAnrechnungImportant.php
@@ -9,7 +9,6 @@
 
                         <i class="me-2 fa fa-lg fa-info-circle" aria-hidden="true"></i>&ensp;
 						<?php echo $this->p->t('anrechnung', 'requestAnrechnungInfoFristenTitle'); ?>
-
                     </div>
                 </div>
             </h2>
@@ -80,4 +79,4 @@
             </div>
         </div>
 	<?php endif; ?>
-</div>
\ No newline at end of file
+</div>
diff --git a/application/views/templates/CISVUE-Header.php b/application/views/templates/CISVUE-Header.php
index 86b5b8755..2f7a3877c 100644
--- a/application/views/templates/CISVUE-Header.php
+++ b/application/views/templates/CISVUE-Header.php
@@ -1,4 +1,5 @@
 <?php
+$this->load->config('theme');
 $includesArray = array(
 	'title' => $title ?? 'FH-Complete',
 	'vue3' => true,
@@ -10,7 +11,8 @@ $includesArray = array(
 		'public/js/apps/Cis.js'
 	], $customJSModules ?? []),
 	'customCSSs' => array_merge([
-		'public/css/Cis4/Cis.css'
+		'public/css/Cis4/Cis.css',
+		$this->config->item('theme_css'),
 	], $customCSSs ?? [])
 );
 
diff --git a/composer.json b/composer.json
index 4dbe026d4..c0dd03abf 100644
--- a/composer.json
+++ b/composer.json
@@ -319,9 +319,9 @@
 			"type": "package",
 			"package": {
 				"name": "twbs/bootstrap5",
-				"version": "5.1.3",
+				"version": "5.3.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.3.zip",
 					"type": "zip"
 				}
 			}
@@ -485,7 +485,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 aa24641f8..500292e19 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -6,57 +6,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-tertiary) !important;
+}
+
+.fhc-secondary-color {
+	color: var(--fhc-tertiary) !important;
+}
+
+.fhc-tertiary-bg{
+	background-color: var(--fhc-secondary) !important;
+}
+
+.fhc-tertiary-color {
+	color: var(--fhc-secondary) !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-tertiary);
+	border-color: var(--fhc-border);
+}
+
+.fhc-tertiary{
+	color: var(--fhc-text);
+	background-color: var(--fhc-secondary);
+	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-secondary);
+	--fhc-cis-menu-bg: var(--fhc-secondary);
+
+	--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-secondary);
+	--fhc-cis-menu-lvl-2-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-2-bg-hover: var(--fhc-secondary-highlight);
+	--fhc-cis-menu-lvl-2-color-hover: var(--fhc-text);
+
+	--fhc-cis-menu-lvl-3-bg: var(--fhc-tertiary);
+	--fhc-cis-menu-lvl-3-color: var(--fhc-text);
+	--fhc-cis-menu-lvl-3-bg-hover: var(--fhc-tertiary-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 +318,7 @@ html {
 
 /* searchbar */
 #nav-search {
+  background-color: var(--fhc-primary);
   z-index: 1;
 }
 #nav-search.me-3 {
@@ -227,9 +347,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 +376,6 @@ html {
   display: flex;
 }
 
-.fhc-active {
-  background-color: var(--fhc-cis-menu-lvl-2-color-active) !important;
-}
-
 .fhc-seperator {
   position: relative;
 }
@@ -265,7 +388,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 +422,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 +454,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 +472,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 +482,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 +517,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 +554,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 +582,7 @@ html {
   }
 }
 .fhc-header > h1 > small {
-  color: #6c757d;
+  color: var(--fhc-tertiary);
   font-size: 1rem;
 }
 .fhc-header > h1 > small:before {
@@ -465,7 +593,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 +610,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/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 b7110943d..c96fca1e1 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-tertiary);
   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 514fee8f3..b3df05a19 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..e922d4812 100644
--- a/public/css/components/NavigationComponent.css
+++ b/public/css/components/NavigationComponent.css
@@ -1,13 +1,24 @@
 /*
  * Hederer
  */
+
+ :root{
+	--nav-component-bg: var(--fhc-tertiary);
+	--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-tertiary);
+	--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 1de5e575b..733fd2bdc 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 {
@@ -86,7 +116,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 {
@@ -96,12 +126,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 {
@@ -117,13 +147,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{
@@ -138,7 +168,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 {
@@ -151,9 +181,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;
@@ -165,11 +193,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 {
@@ -179,7 +215,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 {*/
@@ -224,8 +260,8 @@
 }
 
 .fhc-calendar-month-page-weekday:hover {
-	background-color:#37789c;
-	color:white;
+	background-color:var(--calendar-primary);
+	color:var(--calendar-text-light);
 	
 }
 
@@ -238,14 +274,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;
 }
@@ -277,20 +313,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,*/
@@ -318,6 +354,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 55cd9a8ed..ddb5aff14 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%;
@@ -22,8 +37,8 @@
 }
 
 .alert-danger .form-check-input:checked {
-	border-color: #842029;
-	background-color: #842029;
+	border-color: var(--dashboard-danger);
+	background-color: var(--dashboard-danger);
 }
 
 :root {
@@ -97,6 +112,10 @@
 	opacity: 0.5;
 }
 
+#deleteBookmark i{
+	color: var(--fhc-danger);
+}
+
 .pin:hover{
 	cursor: pointer;
 }
@@ -141,4 +160,4 @@
 		transform: rotate(0em);
 	}
 
-}
\ No newline at end of file
+}
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/css/theme/default.css b/public/css/theme/default.css
new file mode 100644
index 000000000..7f39cff54
--- /dev/null
+++ b/public/css/theme/default.css
@@ -0,0 +1,265 @@
+/* css overrides for static cms content */
+@import './default_cms_fixes.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-secondary: var(--fhc-white-20);
+	--fhc-secondary-highlight: var(--fhc-white-40);
+	
+	--fhc-tertiary: var(--fhc-white-40);
+	--fhc-tertiary-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-50);
+	--fhc-secondary-highlight: var(--fhc-black-70);
+
+	--fhc-tertiary: var(--fhc-black-70);
+	--fhc-tertiary-highlight: var(--fhc-gray-40);
+
+	--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-20);
+	--fhc-secondary-highlight: var(--fhc-purple-40);
+
+	--fhc-tertiary: var(--fhc-purple-30);
+	--fhc-tertiary-highlight: var(--fhc-purple-50);
+
+	/* 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-tertiary) !important;
+	border-color: var(--fhc-border) !important;
+}
+
+html.dark .tabulator .tabulator-header .tabulator-col:hover {
+	background-color: var(--fhc-tertiary) !important;
+}
\ No newline at end of file
diff --git a/public/css/theme/default_cms_fixes.css b/public/css/theme/default_cms_fixes.css
new file mode 100644
index 000000000..a5e46a6f9
--- /dev/null
+++ b/public/css/theme/default_cms_fixes.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/js/apps/Cis.js b/public/js/apps/Cis.js
index b62592ebd..565e18a55 100644
--- a/public/js/apps/Cis.js
+++ b/public/js/apps/Cis.js
@@ -2,6 +2,7 @@ import FhcSearchbar from "../components/searchbar/searchbar.js";
 import CisMenu from "../components/Cis/Menu.js";
 import PluginsPhrasen from '../plugins/Phrasen.js';
 import ApiSearchbar from '../api/factory/searchbar.js';
+import Theme from "../plugin/Theme.js";
 
 const app = Vue.createApp({
     name: 'CisApp',
@@ -122,4 +123,5 @@ app.use(primevue.config.default, {
 	}
 })
 app.use(PluginsPhrasen);
+app.use(Theme);
 app.mount('#cis-header');
diff --git a/public/js/apps/Dashboard/Fhc.js b/public/js/apps/Dashboard/Fhc.js
index fc25fbdfe..e38cd7d6d 100644
--- a/public/js/apps/Dashboard/Fhc.js
+++ b/public/js/apps/Dashboard/Fhc.js
@@ -1,5 +1,6 @@
 import FhcDashboard from '../../components/Dashboard/Dashboard.js';
 import PluginsPhrasen from '../../plugins/Phrasen.js';
+import Theme from '../../plugin/Theme.js';
 import contrast from '../../directives/contrast.js';
 import {setScrollbarWidth} from "../../helpers/CssVarCalcHelpers.js";
 import Stundenplan, {DEFAULT_MODE_STUNDENPLAN} from "../../components/Cis/Stundenplan/Stundenplan.js";
@@ -300,5 +301,6 @@ app.use(primevue.config.default, {
 	}
 })
 app.use(PluginsPhrasen);
+app.use(Theme);
 app.directive('contrast', contrast);
-app.mount('#fhccontent');
\ No newline at end of file
+app.mount('#fhccontent');
diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 292006a85..0e730a1ec 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -139,13 +139,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() {
@@ -181,7 +175,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,
@@ -193,14 +187,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() {
@@ -283,8 +270,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
 			}
 
@@ -396,7 +382,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>
@@ -438,16 +424,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>
@@ -456,7 +442,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 f99d299f6..0fd08078a 100644
--- a/public/js/components/Cis/Cms/Content.js
+++ b/public/js/components/Cis/Cms/Content.js
@@ -92,7 +92,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..c57ccd8ca 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-tertiary)";
+			}
+		});
+
     },
     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 d9c00bc67..50310e771 100644
--- a/public/js/components/Cis/Cms/News.js
+++ b/public/js/components/Cis/Cms/News.js
@@ -84,7 +84,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 01ac2cd83..5c3a80875 100644
--- a/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
+++ b/public/js/components/Cis/Cms/StudiengangInformation/StudiengangInformation.js
@@ -28,7 +28,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">
@@ -37,7 +37,7 @@ template:/*html*/`
 				</div>
 				<div class="mb-1">
 					<h2 class="h4 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="h4 mb-1 pb-0">{{$p.t('lehre','studiensemester')}}: </h2>
@@ -74,6 +74,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:{
@@ -118,4 +119,4 @@ computed:{
 				Object.assign(this, studiengangInformationen);
 			});
 	}
-};
\ No newline at end of file
+};
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/Menu.js b/public/js/components/Cis/Menu.js
index cada49636..99a281ec4 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -1,7 +1,7 @@
 import CisMenuEntry from "./Menu/Entry.js";
 import FhcSearchbar from "../searchbar/searchbar.js";
-import CisSprachen from "./Sprachen.js";
-
+import CisSprachen from "./Sprachen.js"
+import ThemeSwitch from "./ThemeSwitch.js";
 import ApiCisMenu from '../../api/factory/cis/menu.js';
 
 export default {
@@ -9,6 +9,7 @@ export default {
         CisMenuEntry,
         FhcSearchbar,
 		CisSprachen,
+		ThemeSwitch,
     },
     props: {
 		rootUrl: String,
@@ -106,10 +107,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>
+			<theme-switch></theme-switch>
+		</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"/>
@@ -118,19 +124,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 a17eb4b67..01e64ce25 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/Semester/Studiengang/Lv.js b/public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js
index 3b2b877c6..5aed3902f 100644
--- a/public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js
+++ b/public/js/components/Cis/Mylv/Semester/Studiengang/Lv.js
@@ -51,11 +51,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(){
@@ -183,9 +183,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 28afbd1ce..7289845a6 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 d39f9cd0f..d7109579e 100644
--- a/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js
+++ b/public/js/components/Cis/Profil/ProfilComponents/FetchProfilUpdates.js
@@ -180,9 +180,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 4046a9333..483a4665c 100644
--- a/public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js
+++ b/public/js/components/Cis/ProfilUpdate/ProfilUpdateView.js
@@ -252,7 +252,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 7ec397a1a..ab2ceb563 100644
--- a/public/js/components/Cis/Raumsuche/Raumsuche.js
+++ b/public/js/components/Cis/Raumsuche/Raumsuche.js
@@ -90,7 +90,7 @@ export const Raumsuche =  {
 			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 4e450c136..b4db0315a 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/Cis/ThemeSwitch.js b/public/js/components/Cis/ThemeSwitch.js
new file mode 100644
index 000000000..7f560376e
--- /dev/null
+++ b/public/js/components/Cis/ThemeSwitch.js
@@ -0,0 +1,32 @@
+export default {
+	data:()=>{
+		return{
+			theme: null,
+		}
+	},
+	methods:{
+		switchTheme(nextTheme){
+			this.theme = nextTheme;
+			this.$theme.switchTheme(this.theme);
+		}
+	},
+	computed:{
+		nextTheme(){
+			return this.$theme.theme_modes[(this.$theme.theme_modes.indexOf(this.theme) + 1) % this.$theme.theme_modes.length];
+		},
+	},
+	created(){
+		this.theme = localStorage.getItem('theme');
+		if (!this.theme || !this.$theme.theme_modes.includes(this.theme)) {
+			this.theme = this.$theme.theme_modes[0];
+		}
+	},
+	template:/*html*/`
+
+	<button @click="switchTheme(nextTheme)" class="fhc-primary-highlight-bg align-self-center btn btn-secondary rounded-5">
+		<i v-if="theme == 'light'" class="fa-solid fa-sun fhc-text"></i>
+		<i v-else-if="theme == 'dark'" class="fa-solid fa-moon 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/DashboardWidget/Ampel.js b/public/js/components/DashboardWidget/Ampel.js
index a12de7726..378b34061 100644
--- a/public/js/components/DashboardWidget/Ampel.js
+++ b/public/js/components/DashboardWidget/Ampel.js
@@ -193,7 +193,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 e492f785a..1fc3a6a19 100644
--- a/public/js/components/DashboardWidget/Stundenplan.js
+++ b/public/js/components/DashboardWidget/Stundenplan.js
@@ -191,8 +191,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 2b1dea81d..0190b1479 100644
--- a/public/js/components/DashboardWidget/Url.js
+++ b/public/js/components/DashboardWidget/Url.js
@@ -177,8 +177,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
diff --git a/public/js/plugin/Theme.js b/public/js/plugin/Theme.js
new file mode 100644
index 000000000..d063b4d46
--- /dev/null
+++ b/public/js/plugin/Theme.js
@@ -0,0 +1,55 @@
+const theme_name= FHC_JS_DATA_STORAGE_OBJECT.theme.name;
+const theme_modes = FHC_JS_DATA_STORAGE_OBJECT.theme.modes;
+
+const toggleTheme = (theme)=>{
+	if (!theme) return;
+
+	for (const theme of theme_modes) {
+		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");
+	}
+	else{
+		if (stylesheet.attributes.href.value.includes("bootstrap4-dark-blue"))
+			stylesheet.attributes.href.value = stylesheet.attributes.href.value.replace("bootstrap4-dark-blue", "bootstrap4-light-blue");
+	}
+
+	localStorage.setItem("theme", theme);
+}
+
+const initializeTheme = ()=>{
+	
+	let theme = localStorage.getItem("theme");
+	if (!theme || !theme_modes.includes(theme)) {
+		// set the first theme mode as default
+		theme = theme_modes[0];
+		localStorage.setItem("theme",theme);
+	}
+	toggleTheme(theme);
+}
+
+
+export default {
+	install: (app,options)=>{
+		
+		document.documentElement.classList.add(theme_name);
+
+		initializeTheme();
+
+		app.config.globalProperties.$theme = {
+			theme_name,
+			theme_modes,
+			switchTheme: (theme) => {
+				toggleTheme(theme);
+			}, 
+		} 
+	}
+}
\ No newline at end of file