Merge pull request #153 from KindtAnton/master

Dark theme users can toggle off darkmode + button color fix

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;
 }

app/static/js/darkmode.js

@@ -6,13 +6,14 @@
 	}
 
 	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'){
+			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 {

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 %}