Added 'sinterklaas' theme

2019-11-16 14:54:45 +01:00 · 2019-11-16 14:54:45 +01:00 · cd47d05c16
parent 4c227c9a85
commit cd47d05c16
4 changed files with 94 additions and 63 deletions
--- a/app/static/css/main.css
+++ b/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{
-	color: var(--dGray0);
-}
-
-.darkmode h4, .darkmode h5{
+.darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6{
 	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);
--- a/app/static/images/Sinterklaas.jpg
+++ b/app/static/images/Sinterklaas.jpg
--- a/app/static/js/darkmode.js
+++ b/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);
-		if($customThemes){
-			$customThemes.addEventListener("click", toggleCustomThemes);
-		}
-		if(localStorage.getItem("customThemes") == 'true'){
-			setThemeHalloween();
-		}
-	    enableDarkmode();
+		const $darkmode = document.querySelector(".enter_darkmode");
+		if($darkmode) $darkmode.addEventListener("click", ()=>toggleBetween("lightmode", "darkmode"));
+		const $customThemes = document.querySelector(".custom__themes");
+		if($customThemes) $customThemes.addEventListener("click", ()=>toggleBetween("darkmode", "sinterklaas")); //TODO: Create automatic custom team selector
+
+		reloadTheme();
 	}

-	const toggleDarkmode = () => {
-		localStorage.setItem("darkmodeChanged", 'true');
-		var newState = !(localStorage.getItem("darkmode") == 'true');
-	    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')){
-				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 = () => {
-		if(localStorage.getItem("customThemes") == 'true'){
-			localStorage.setItem("customThemes", 'false');
-			setThemeDarkMode();
+	const toggleBetween = (first, second) => {
+		if(localStorage.getItem("theme") == second){
+			localStorage.setItem("theme", first)
 		}else{
-			localStorage.setItem("customThemes", 'true');
-			localStorage.setItem("darkmodeChanged", 'true');
-			localStorage.setItem("darkmode", 'true');
-			enableDarkmode();
-			setThemeHalloween();
+			localStorage.setItem("theme", second)
 		}
+		reloadTheme();
 	}

-	const setTheme = theme =>{
-		switch(theme){
+	const reloadTheme = () => {
+			if (typeof(Storage) !== "undefined") {
+				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 {
+				console.log('You browser does not support local storage, no darkmode for you!' )
+			}
+	}
+
+	const setTheme = () =>{
+		document.querySelector('body').classList.add('darkmode');
+		switch(localStorage.getItem("theme")){
 			case "halloween":
 				setThemeHalloween();
+				break;
+			case "sinterklaas":
+				setThemeSinterklaas();
+				break;
+			case "darkmode":
+				setThemeDarkMode();
+				break;
+			case "lightmode":
+			default:
+				setThemeLightMode();
+				break;
 		}
 	}

+	//TODO: Use an external file to load themes
+	//TODO: Darkness and blur variables
+
+	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();
 }
--- a/app/templates/layout.html
+++ b/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 src="{{ url_for('static', filename='js/timer.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/darkmode.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">