diff --git a/app/static/css/main.css b/app/static/css/main.css
index 3c654f3..f91974e 100644
--- a/app/static/css/main.css
+++ b/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;
}
diff --git a/app/static/js/darkmode.js b/app/static/js/darkmode.js
new file mode 100644
index 0000000..a9aacaa
--- /dev/null
+++ b/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();
+}
\ No newline at end of file
diff --git a/app/templates/layout.html b/app/templates/layout.html
index c658c82..d16468b 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -29,6 +29,7 @@ Haldis - {{ active_page|capitalize }}
{% block scripts %}
{{ super() }}
+ >
{% endblock %}
@@ -76,8 +77,11 @@ Haldis - {{ active_page|capitalize }}
{%- endblock %}
diff --git a/app/templates/order_edit.html b/app/templates/order_edit.html
index b960e4c..143903b 100644
--- a/app/templates/order_edit.html
+++ b/app/templates/order_edit.html
@@ -59,6 +59,7 @@
{% block styles -%}
{{ super() }}
+