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 af8a32807..73a91594f 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){
@@ -103,6 +104,10 @@ function generateJSDataStorageObject($indexPage, $calledPath, $calledMethod)
 		'server_languages' => $server_language,
 		'user_language' => $user_language,
 		'timezone' => date_default_timezone_get(),
+		'theme' => [
+			'name'=>$ci->config->item('theme_name'),
+			'modes'=>$ci->config->item('theme_modes'),
+		]
 	);
 
 	$toPrint = "\n";
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/public/css/Cis4/Cis.css b/public/css/Cis4/Cis.css
index 8602def32..8010d0746 100644
--- a/public/css/Cis4/Cis.css
+++ b/public/css/Cis4/Cis.css
@@ -1,5 +1,4 @@
 /* basic */
-@import './CisVariables.css';
 @import '../components/searchbar/searchbar.css';
 @import '../components/Sprachen.css';
 
diff --git a/public/css/Cis4/CisVariables.css b/public/css/theme/default.css
similarity index 93%
rename from public/css/Cis4/CisVariables.css
rename to public/css/theme/default.css
index 53af08837..2d94847ee 100644
--- a/public/css/Cis4/CisVariables.css
+++ b/public/css/theme/default.css
@@ -1,10 +1,10 @@
 /* css overrides for static cms content */
-@import './CisVariablesCms.css';
+@import './default_cms_fixes.css';
 
 /* colors */
 :root {
 
-	--fhc-black-10:black;
+	--fhc-black-10: black;
 	--fhc-black-20: #1d2024;
 	--fhc-black-30: #212529;
 	--fhc-black-40: #292b2a;
@@ -13,14 +13,14 @@
 	--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-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;
@@ -40,18 +40,18 @@
 
 	--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);
-	
-	
+	--fhc-beige-10: rgba(245, 233, 215, 0.5);
+	--fhc-beige-20: rgba(172, 153, 125, 0.5);
+
+
 
 }
 
-:root.light{
-	
+:root.light {
+
 
 	/* fhc base colors */
 	--fhc-primary: var(--fhc-blue-20);
@@ -72,10 +72,10 @@
 	/*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);
@@ -100,7 +100,7 @@
 
 }
 
-:root.dark{
+:root.dark {
 
 	/* fhc base colors */
 	--fhc-primary: var(--fhc-blue-primary-highlight);
diff --git a/public/css/Cis4/CisVariablesCms.css b/public/css/theme/default_cms_fixes.css
similarity index 100%
rename from public/css/Cis4/CisVariablesCms.css
rename to public/css/theme/default_cms_fixes.css
diff --git a/public/js/components/Cis/Menu.js b/public/js/components/Cis/Menu.js
index 08934cc78..aa2fc3411 100644
--- a/public/js/components/Cis/Menu.js
+++ b/public/js/components/Cis/Menu.js
@@ -1,14 +1,14 @@
 import CisMenuEntry from "./Menu/Entry.js";
 import FhcSearchbar from "../searchbar/searchbar.js";
 import CisSprachen from "./Sprachen.js"
-import DarkTheme from "./DarkTheme.js";
+import ThemeSwitch from "./ThemeSwitch.js";
 
 export default {
     components: {
         CisMenuEntry,
         FhcSearchbar,
 		CisSprachen,
-		DarkTheme,
+		ThemeSwitch,
     },
     props: {
 		rootUrl: String,
diff --git a/public/js/components/Cis/DarkTheme.js b/public/js/components/Cis/ThemeSwitch.js
similarity index 85%
rename from public/js/components/Cis/DarkTheme.js
rename to public/js/components/Cis/ThemeSwitch.js
index 2d3192b6d..445e71cf0 100644
--- a/public/js/components/Cis/DarkTheme.js
+++ b/public/js/components/Cis/ThemeSwitch.js
@@ -1,8 +1,9 @@
 export default {
 	data:()=>{
 		return{
-			theme:'light',
-			themes:['light','dark','purple'],
+			theme: FHC_JS_DATA_STORAGE_OBJECT.theme.modes[0],
+			theme_name: FHC_JS_DATA_STORAGE_OBJECT.theme.name,
+			themes: FHC_JS_DATA_STORAGE_OBJECT.theme.modes,
 		}
 	},
 	methods:{
@@ -40,6 +41,9 @@ export default {
 		this.toggleTheme(this.theme);
 
 	},
+	created(){
+		document.documentElement.classList.add(this.theme_name);	
+	},
 	template:/*html*/`
 
 	<button @click="toggleTheme(nextTheme)" class="fhc-primary-highlight-bg align-self-center btn btn-secondary rounded-5">