From d865cd1b79dfe42ac68251e45dd0e92179183738 Mon Sep 17 00:00:00 2001
From: kindtanton <kindtchiva@gmail.com>
Date: Thu, 24 Oct 2019 16:15:35 +0200
Subject: [PATCH] Dark theme users can toggle off darkmode + button color fix

---
 app/static/css/main.css   | 55 +++------------------------------------
 app/static/js/darkmode.js |  7 ++---
 app/templates/layout.html |  2 +-
 3 files changed, 8 insertions(+), 56 deletions(-)

diff --git a/app/static/css/main.css b/app/static/css/main.css
index f91974e..a03cbb6 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -17,6 +17,9 @@
 .darkmode a {
 	color: var(--dBlue);
 }
+.darkmode .btn {
+	color: var(--dGray0);
+}
 .darkmode .navbar {
 	background-color: var(--dGray6);
 }
@@ -63,58 +66,6 @@
 	text-align: center;
 }
 
-
-@media (prefers-color-scheme: dark) {
-	body {
-		background-color: var(--dGray5);
-		color: var(--dGray1);
-	}
-	a {
-		color: var(--dBlue);
-	}
-	.navbar {
-		background-color: var(--dGray6);
-	}
-	.navbar-default .navbar-nav .active a{
-		background-color: var(--dGray4);
-		color: var(--dGray1);
-	}
-	.navbar-default .navbar-nav .active a:hover{
-		background-color: var(--dGray3);
-		color: var(--dGray0);
-	}
-	.navbar-default .navbar-nav li a,.navbar-default .navbar-brand{
-		color: var(--dGray1);
-	}
-	.navbar-default .navbar-nav li a:hover,.navbar-default .navbar-brand:hover{
-		color: var(--dGray0);
-	}
-	hr{
-		border-top: 1px solid var(--dGray2);
-	}
-
-	h1, h2, h3{
-		color: var(--dGray0);
-	}
-
-	h4, h5{
-		color: var(--dGray1);
-	}
-
-	h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-		color: var(--dGray3);
-	}
-	.jumbotron, .darker {
-		background-color: var(--dGray4)!important;
-	}
-	.table tbody tr td {
-		border-top: 1px solid var(--dGray3);
-	}
-	.table thead tr th {
-		border-bottom: 2px solid var(--dGray2);
-	}
-}
-
 body {
   padding-top: 70px;
 }
diff --git a/app/static/js/darkmode.js b/app/static/js/darkmode.js
index a9aacaa..d6dc584 100644
--- a/app/static/js/darkmode.js
+++ b/app/static/js/darkmode.js
@@ -6,15 +6,16 @@
 	}
 
 	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'){
-			document.querySelector('body').classList.remove('lightmode');
-			 document.querySelector('body').classList.add('darkmode');
+			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');
diff --git a/app/templates/layout.html b/app/templates/layout.html
index d16468b..01bb8e7 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -29,7 +29,7 @@ Haldis - {{ active_page|capitalize }}
 
 {% block scripts %}
     {{ super() }}
-    <script src="{{ url_for('static', filename='js/darkmode.js') }}"></script>>
+    <script src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
     <script src="{{ url_for('static', filename='js/timer.js') }}"></script>
 {% endblock %}