Merge pull request #151 from KindtAnton/master

Added dark mode

app/static/css/main.css

@@ -1,8 +1,135 @@
 /* Custom CSS */
+:root {
+	--dGray0:#B0B0B8;
+    --dGray1:#8E8E93;
+    --dGray2:#636366;
+    --dGray3:#48484A;
+    --dGray4:#3A3A3C;
+    --dGray5:#2C2C2E;
+    --dGray6:#1C1C1E;
+    --dBlue:#0A84FF;
+}
+
+.darkmode {
+	background-color: var(--dGray5);
+	color: var(--dGray1);
+}
+.darkmode a {
+	color: var(--dBlue);
+}
+.darkmode .navbar {
+	background-color: var(--dGray6);
+}
+.darkmode .navbar-default .navbar-nav .active a{
+	background-color: var(--dGray4);
+	color: var(--dGray1);
+}
+.darkmode .navbar-default .navbar-nav .active a:hover{
+	background-color: var(--dGray3);
+	color: var(--dGray0);
+}
+.darkmode .navbar-default .navbar-nav li a,.darkmode .navbar-default .navbar-brand{
+	color: var(--dGray1);
+}
+.darkmode .navbar-default .navbar-nav li a:hover,.darkmode .navbar-default .navbar-brand:hover{
+	color: var(--dGray0);
+}
+.darkmode hr{
+	border-top: 1px solid var(--dGray2);
+}
+
+.darkmode h1, .darkmode h2, .darkmode h3{
+	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)!important;
+}
+.darkmode .table tbody tr td {
+	border-top: 1px solid var(--dGray3);
+}
+.darkmode .table thead tr th {
+	border-bottom: 2px solid var(--dGray2);
+}
+
+.enter_darkmode a {
+	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;
 }
 
+.footerWrapper {
+	display: flex;
+	justify-content: space-between;
+}
+
+.darkCheck:checked ~ body {
+		background-color: var(--dGray5);
+		color: var(--dGray1);
+}
+
+
 .padding-top {
   padding-top: 10px;
 }
@@ -51,7 +178,6 @@ div.box:hover {
     cursor: hand;
     cursor: pointer;
     opacity: .9;
-    /*border-bottom: #f44346 1px solid !important;*/
     box-shadow: 2px 4px 4px -1px #888888;
 }
 

app/static/js/darkmode.js

@@ -0,0 +1,27 @@
+{
+	var $darkmode = document.querySelector(".enter_darkmode");
+	const init = () => {
+	    $darkmode.addEventListener("click", toggleDarkmode);
+	    enableDarkmode();
+	}
+
+	const toggleDarkmode = () => {
+		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');
+			} 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!' )
+		}
+	}
+	init();
+}

app/templates/layout.html

@@ -29,6 +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/timer.js') }}"></script>
 {% endblock %}
 
@@ -76,8 +77,11 @@ Haldis - {{ active_page|capitalize }}
     <footer>
     <hr>
     <div class="container">
+      <div class="footerWrapper">
         <div class="pull-left">Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a></div>
+        <div class="enter_darkmode"><a>Toggle darkmode</a></div>
         <div class="pull-right"><a href="http://github.com/ZeusWPI/Haldis">© {{ ""|year }}</a></div>
       </div>
+    </div>
     </footer>
 {%- endblock %}

app/templates/order_edit.html

@@ -59,6 +59,7 @@
 
 {% block styles -%}
     {{ super() }}
+
     <link rel="stylesheet" href="{{ url_for('static', filename='css/select2.min.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-datetimepicker.min.css') }}" />
     <link rel="stylesheet" href="{{ url_for('static', filename='css/select2-bootstrap.min.css') }}" />