Merge pull request #158 from Arnhoudt/master

Added Halloween theme

app/static/css/main.css

@@ -10,9 +10,16 @@
     --dGray6:#1C1C1E;
     --dBlue:#0A84FF;
 }
+html {
+    height: 100%;
+}
 
 body {
   padding-top: 70px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 100%;
 }
 
 .padding-top {
@@ -97,6 +104,10 @@ a.divLink {
     margin: 0 1rem;
 }
 
+.hidden {
+    display: none;
+}
+
 .darkmode {
 	background-color: var(--dGray5);
 	color: var(--dGray1);

app/static/js/darkmode.js

@@ -1,7 +1,14 @@
 {
 	var $darkmode = document.querySelector(".enter_darkmode");
+	var $customThemes = document.querySelector(".custom__themes");
 	const init = () => {
-	    $darkmode.addEventListener("click", toggleDarkmode);
+		$darkmode.addEventListener("click", toggleDarkmode);
+		if($customThemes){
+			$customThemes.addEventListener("click", toggleCustomThemes);
+		}
+		if(localStorage.getItem("customThemes") == 'true'){
+			setThemeHalloween();
+		}
 	    enableDarkmode();
 	}
 
@@ -11,6 +18,7 @@
 	    localStorage.setItem("darkmode", newState);
 	    enableDarkmode();
 	}
+
 	const enableDarkmode = () => {
 		if (typeof(Storage) !== "undefined") {
 			if(localStorage.getItem("darkmode") == 'true' && localStorage.getItem("darkmodeChanged") == 'true' || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem("darkmodeChanged") != 'true')){
@@ -24,5 +32,53 @@
 			console.log('You browser does not support local storage, no darkmode for you!' )
 		}
 	}
+
+	const toggleCustomThemes = () => {
+		if(localStorage.getItem("customThemes") == 'true'){
+			localStorage.setItem("customThemes", 'false');
+			setThemeDarkMode();
+		}else{
+			localStorage.setItem("customThemes", 'true');
+			localStorage.setItem("darkmodeChanged", 'true');
+			localStorage.setItem("darkmode", 'true');
+			enableDarkmode();
+			setThemeHalloween();
+		}
+	}
+
+	const setTheme = theme =>{
+		switch(theme){
+			case "halloween":
+				setThemeHalloween();
+		}
+	}
+
+	const setThemeDarkMode = () => {
+		document.querySelector('.enter_darkmode').classList.remove("hidden");
+		let root = document.documentElement;
+		root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color
+		root.style.setProperty('--dGray5', "#2C2C2E");
+		root.style.setProperty('--dGray4', "#3A3A3C");
+		root.style.setProperty('--dGray3', "#48484A");
+		root.style.setProperty('--dGray2', "#636366");
+		root.style.setProperty('--dGray1', "#8E8E93");
+		root.style.setProperty('--dGray0', "#B0B0B8"); //Light color
+		root.style.setProperty('--dBlue', "#0A84FF");
+		document.body.style.backgroundImage =  'none';
+	}
+
+	const setThemeHalloween = () => {
+		document.querySelector('.enter_darkmode').classList.add("hidden");
+		let root = document.documentElement;
+		root.style.setProperty('--dGray6', "#260101"); //Dark color
+		root.style.setProperty('--dGray5', "#260101");
+		root.style.setProperty('--dGray4', "#8C3D0F");
+		root.style.setProperty('--dGray3', "#F27405");
+		root.style.setProperty('--dGray2', "#F25C05");
+		root.style.setProperty('--dGray1', "#F28705");
+		root.style.setProperty('--dGray0', "#FFEB65"); //Light color
+		root.style.setProperty('--dBlue', "#D91604");
+		document.body.style.backgroundImage = "url('/static/images/Halloween.jpeg')";
+	}
 	init();
 }

app/templates/profile.html

@@ -3,4 +3,6 @@
 
 {% block container %}
   <h1>{{ current_user.username }}</h1>
+  <h3>Themes</h3>
+  <p><a class="custom__themes">enable custom themes</a></p>
 {% endblock %}