Merge pull request #160 from ZeusWPI/sint-theme

Added 'sinterklaas' theme

app/static/css/main.css

@@ -1,7 +1,7 @@
 /* Custom CSS */
 :root {
     /*Darkmode colors*/
-	--dGray0:#B0B0B8;
+	--dGray0:#D0D0D8;
     --dGray1:#8E8E93;
     --dGray2:#636366;
     --dGray3:#48484A;
@@ -16,10 +16,24 @@ html {
 
 body {
   padding-top: 70px;
+  
+  height: 100%;
+}
+.background{
+  position: absolute;
+  z-index: -1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
-  height: 100%;
+  -webkit-filter: blur(2px) brightness(50%);
+  -moz-filter: blur(2px) brightness(50%);
+  -o-filter: blur(2px) brightness(50%);
+  -ms-filter: blur(2px) brightness(50%);
+  filter: blur(2px) brightness(50%);
 }
 
 .padding-top {
@@ -116,7 +130,7 @@ a.divLink {
 	color: var(--dBlue);
 }
 .darkmode .btn-primary {
-    color: white;
+    color: var(--dGray6);
     background-color: var(--dBlue);
 }
 
@@ -141,17 +155,10 @@ a.divLink {
 	border-top: 1px solid var(--dGray2);
 }
 
-.darkmode h1, .darkmode h2, .darkmode h3{
+.darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6{
-	color: var(--dGray0);
-}
-
-.darkmode h4, .darkmode h5{
 	color: var(--dGray1);
 }
 
-.darkmode h6, .darkmode .h1, .darkmode .h2, .darkmode .h3, .darkmode .h4, .darkmode .h5, .darkmode .h6 {
-	color: var(--dGray3);
-}
 .darkmode .jumbotron, .darkmode .darker {
 	background-color: var(--dGray4);
 }
@@ -167,7 +174,6 @@ a.divLink {
 }
 .darkmode .select2-container--default .select2-selection--single{
     background-color: var(--dGray3);
-    border: 1px solid var(--dGray1);
     color: var(--dGray0);
 }
 .darkmode .select2-container--default .select2-selection--single .select2-selection__rendered{
@@ -192,7 +198,7 @@ a.divLink {
 
 .darkmode .select2-container--default .select2-results__option[aria-selected=true]{
     background-color: var(--dBlue);
-    color: white;
+    color: var(--dGray0);
 }
 .darkmode .select2-search{
     background-color: var(--dGray2);
@@ -204,7 +210,7 @@ a.divLink {
     background-color: var(--dGray5);
 }
 .darkmode .form-control{
-    color: white;
+    color: var(--dGray0);
 }
 .darkmode .form-control::placeholder{
     color: var(--dGray2);

app/static/js/darkmode.js

@@ -1,60 +1,71 @@
 {
-	var $darkmode = document.querySelector(".enter_darkmode");
-	var $customThemes = document.querySelector(".custom__themes");
 	const init = () => {
-		$darkmode.addEventListener("click", toggleDarkmode);
+		const $darkmode = document.querySelector(".enter_darkmode");
-		if($customThemes){
+		if($darkmode) $darkmode.addEventListener("click", ()=>toggleBetween("lightmode", "darkmode"));
-			$customThemes.addEventListener("click", toggleCustomThemes);
+		const $customThemes = document.querySelector(".custom__themes");
-		}
+		if($customThemes) $customThemes.addEventListener("click", ()=>toggleBetween("darkmode", "sinterklaas")); //TODO: Create automatic custom team selector
-		if(localStorage.getItem("customThemes") == 'true'){
+
-			setThemeHalloween();
+		reloadTheme();
-		}
-	    enableDarkmode();
 	}
 
-	const toggleDarkmode = () => {
+	const toggleBetween = (first, second) => {
-		localStorage.setItem("darkmodeChanged", 'true');
+		if(localStorage.getItem("theme") == second){
-		var newState = !(localStorage.getItem("darkmode") == 'true');
+			localStorage.setItem("theme", first)
-	    localStorage.setItem("darkmode", newState);
+		}else{
-	    enableDarkmode();
+			localStorage.setItem("theme", second)
+		}
+		reloadTheme();
 	}
 
-	const enableDarkmode = () => {
+	const reloadTheme = () => {
 			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')){
+				if(localStorage.getItem("theme") !== null){
+					setTheme();
+				}else if((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)){
 					document.querySelector('body').classList.remove('lightmode');
 					document.querySelector('body').classList.add('darkmode');
-			} else {
-				document.querySelector('body').classList.remove('darkmode');
-				document.querySelector('body').classList.add('lightmode');
 				}
 			} else {
 				console.log('You browser does not support local storage, no darkmode for you!' )
 			}
 	}
 
-	const toggleCustomThemes = () => {
+	const setTheme = () =>{
-		if(localStorage.getItem("customThemes") == 'true'){
+		document.querySelector('body').classList.add('darkmode');
-			localStorage.setItem("customThemes", 'false');
+		switch(localStorage.getItem("theme")){
-			setThemeDarkMode();
+			case "halloween":
-		}else{
-			localStorage.setItem("customThemes", 'true');
-			localStorage.setItem("darkmodeChanged", 'true');
-			localStorage.setItem("darkmode", 'true');
-			enableDarkmode();
 				setThemeHalloween();
+				break;
+			case "sinterklaas":
+				setThemeSinterklaas();
+				break;
+			case "darkmode":
+				setThemeDarkMode();
+				break;
+			case "lightmode":
+			default:
+				setThemeLightMode();
+				break;
 		}
 	}
 
-	const setTheme = theme =>{
+	//TODO: Use an external file to load themes
-		switch(theme){
+	//TODO: Darkness and blur variables
-			case "halloween":
+
-				setThemeHalloween();
+	const setThemeLightMode = () => {
-		}
+		let root = document.documentElement;
+		root.style.setProperty('--dGray6', "#ffffff"); //Dark color
+		root.style.setProperty('--dGray5', "#ffffff");
+		root.style.setProperty('--dGray4', "#f9f9f9");
+		root.style.setProperty('--dGray3', "#ffffff");
+		root.style.setProperty('--dGray2', "#212121");
+		root.style.setProperty('--dGray1', "#666666");
+		root.style.setProperty('--dGray0', "#444444"); //Light color
+		root.style.setProperty('--dBlue', "#0A84FF");
+		document.querySelector('.background').style.backgroundImage =  'none';
 	}
 
 	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");
@@ -62,13 +73,12 @@
 		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('--dGray0', "#E0E0E8"); //Light color
 		root.style.setProperty('--dBlue', "#0A84FF");
-		document.body.style.backgroundImage =  'none';
+		document.querySelector('.background').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");
@@ -78,7 +88,21 @@
 		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')";
+		document.querySelector('.background').backgroundImage = "url('/static/images/Halloween.jpeg')";
+	}
+
+	const setThemeSinterklaas = () => {
+		let root = document.documentElement;
+		root.style.setProperty('--dGray6', "#F50B00"); //Dark color
+		root.style.setProperty('--dGray5', "#F20505");
+		root.style.setProperty('--dGray4', "#0C6AA6");
+		root.style.setProperty('--dGray3', "#177EBF");
+		root.style.setProperty('--dGray2', "#F2EF05");
+		root.style.setProperty('--dGray1', "#F2EF05");
+		root.style.setProperty('--dGray0', "#F2EB80"); //Light color
+		root.style.setProperty('--dBlue', "#35F546");
+		document.body.style.background =  "#000000";
+		document.querySelector('.background').style.backgroundImage = "url('/static/images/Sinterklaas.jpg')";
 	}
 	init();
 }

app/templates/layout.html

@@ -29,11 +29,12 @@ Haldis - {{ active_page|capitalize }}
 
 {% block scripts %}
     {{ super() }}
-    <script src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/timer.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
 {% endblock %}
 
 {% block navbar %}
+    <div class="background"></div>
     <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
         <div class="navbar-header">