feature(FHC Theme plugin): adds a plugin that provides functionality and information of the current theme

public/js/apps/Cis.js

@@ -2,6 +2,7 @@ import FhcSearchbar from "../components/searchbar/searchbar.js";
 import CisMenu from "../components/Cis/Menu.js";
 import FhcApi from '../plugin/FhcApi.js';
 import Phrasen from '../plugin/Phrasen.js';
+import Theme from "../plugin/Theme.js";
 import fhcapifactory from "./api/fhcapifactory.js";
 Vue.$fhcapi = fhcapifactory;
 
@@ -124,4 +125,5 @@ app.use(primevue.config.default, {
 	}
 })
 app.use(Phrasen);
+app.use(Theme);
 app.mount('#cis-header');

public/js/apps/Dashboard/Fhc.js

@@ -1,6 +1,7 @@
 import FhcDashboard from '../../components/Dashboard/Dashboard.js';
 import FhcApi from '../../plugin/FhcApi.js';
 import Phrasen from '../../plugin/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";
@@ -273,5 +274,6 @@ app.use(primevue.config.default, {
 	}
 })
 app.use(Phrasen);
+app.use(Theme);
 app.directive('contrast', contrast);
 app.mount('#fhccontent');

public/js/components/Cis/Menu.js

@@ -111,7 +111,7 @@ export default {
 			<a :href="rootUrl">
 				<img :src="logoUrl" alt="Logo">
 			</a>
-			<dark-theme></dark-theme>
+			<theme-switch></theme-switch>
 		</div>
     </div>
 	<div id="nav-user">

public/js/components/Cis/ThemeSwitch.js

@@ -1,54 +1,31 @@
 export default {
 	data:()=>{
 		return{
-			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,
+			theme: null,
 		}
 	},
 	methods:{
-		toggleTheme(theme){
-			if(!theme) return;
-
-			for(const theme of this.themes){
-				document.documentElement.classList.remove(theme);
-			}
-			document.documentElement.classList.add(theme);
-
-			document.body.setAttribute("data-bs-theme", theme);
-
-			let stylesheet = document.querySelector('link[href*="primevue/resources/themes"]');
-			if(theme =="dark"){
-				stylesheet.attributes.href.value = stylesheet.attributes.href.value.replace("bootstrap4-light-blue", "bootstrap4-dark-blue");
-			}else if(theme =="light"){
-				stylesheet.attributes.href.value = stylesheet.attributes.href.value.replace("bootstrap4-dark-blue", "bootstrap4-light-blue");
-			} 
-
-			localStorage.setItem("theme",theme);
-			this.theme = theme;
+		switchTheme(nextTheme){
+			this.theme = nextTheme;
+			this.$theme.switchTheme(this.theme);
 		}
 	},
 	computed:{
 		nextTheme(){
-			return this.themes[(this.themes.indexOf(this.theme) + 1) % this.themes.length];
+			return this.$theme.theme_modes[(this.$theme.theme_modes.indexOf(this.theme) + 1) % this.$theme.theme_modes.length];
 		},
 	},
-	mounted(){
-		const theme =localStorage.getItem("theme");
-		if(this.themes.includes(theme)){
-			this.theme = theme;
-		}
-		this.toggleTheme(this.theme);
-
-	},
 	created(){
-		document.documentElement.classList.add(this.theme_name);	
+		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="toggleTheme(nextTheme)" class="fhc-primary-highlight-bg align-self-center btn btn-secondary rounded-5">
-		<i v-if="theme == 'light'" class="fa-solid fa-moon fhc-text"></i>
-		<i v-else-if="theme == 'dark'" class="fa-solid fa-sun fhc-text"></i>
+	<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>
 	`

public/js/plugin/Theme.js

@@ -0,0 +1,51 @@
+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");
+	}
+
+	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);
+			}, 
+		} 
+	}
+}