diff --git a/app/static/css/darkmode.css b/app/static/css/darkmode.css
new file mode 100644
index 0000000..7b5130b
--- /dev/null
+++ b/app/static/css/darkmode.css
@@ -0,0 +1,110 @@
+:root {
+ /*Darkmode colors*/
+ --dGray0:#D0D0D8;
+ --dGray1:#8E8E93;
+ --dGray2:#636366;
+ --dGray3:#48484A;
+ --dGray4:#3A3A3C;
+ --dGray5:#2C2C2E;
+ --dGray6:#1C1C1E;
+ --dBlue:#0A84FF;
+}
+.table-hover tbody tr:hover{
+ background-color: var(--dGray3);
+}
+body{
+ background-color: var(--dGray5);
+ color: var(--dGray1);
+}
+a {
+ color: var(--dBlue);
+}
+.btn-primary {
+ color: var(--dGray6);
+ background-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, h4, h5, h6{
+ color: var(--dGray1);
+}
+
+.jumbotron, .darker {
+ background-color: var(--dGray4);
+}
+.table tbody tr td {
+ border-top: 1px solid var(--dGray3);
+}
+.table thead tr th {
+ border-bottom: 2px solid var(--dGray2);
+}
+.navbar-toggle .icon-bar {
+ background-color: var(--dGray0);
+ opacity: 0.5;
+}
+.select2-container--default .select2-selection--single{
+ background-color: var(--dGray3);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+ color: var(--dGray0);
+}
+.select2-results__option{
+ background-color: var(--dGray5);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+ background-color: var(--dGray4);
+ color: var(--dGray0);
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td span:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+ background: var(--dGray4);
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+ background-color: var(--dBlue);
+ color: var(--dGray0);
+}
+.select2-search{
+ background-color: var(--dGray2);
+}
+.select2-search input{
+ background-color: var(--dGray0);
+}
+.dropdown-menu{
+ background-color: var(--dGray5);
+}
+.form-control{
+ color: var(--dGray0);
+}
+.form-control::placeholder{
+ color: var(--dGray2);
+}
+.enter_darkmode>a {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/app/static/css/main.css b/app/static/css/main.css
index 6f4f666..0e9b353 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -86,10 +86,6 @@ div.box:hover {
box-shadow: 2px 4px 4px -1px #888888;
}
-.darkmode .table-hover tbody tr:hover{
- background-color: var(--dGray3);
-}
-
a.divLink {
position: absolute;
width: 100%;
@@ -120,101 +116,4 @@ a.divLink {
.hidden {
display: none;
-}
-
-.darkmode {
- background-color: var(--dGray5);
- color: var(--dGray1);
-}
-.darkmode a {
- color: var(--dBlue);
-}
-.darkmode .btn-primary {
- color: var(--dGray6);
- background-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, .darkmode h4, .darkmode h5, .darkmode h6{
- color: var(--dGray1);
-}
-
-.darkmode .jumbotron, .darkmode .darker {
- background-color: var(--dGray4);
-}
-.darkmode .table tbody tr td {
- border-top: 1px solid var(--dGray3);
-}
-.darkmode .table thead tr th {
- border-bottom: 2px solid var(--dGray2);
-}
-.darkmode .navbar-toggle .icon-bar {
- background-color: var(--dGray0);
- opacity: 0.5;
-}
-.darkmode .select2-container--default .select2-selection--single{
- background-color: var(--dGray3);
- color: var(--dGray0);
-}
-.darkmode .select2-container--default .select2-selection--single .select2-selection__rendered{
- color: var(--dGray0);
-}
-.darkmode .select2-results__option{
- background-color: var(--dGray5);
- color: var(--dGray0);
-}
-.darkmode .select2-container--default .select2-results__option--highlighted[aria-selected] {
- background-color: var(--dGray4);
- color: var(--dGray0);
-}
-.darkmode .bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
-.darkmode .bootstrap-datetimepicker-widget table td.day:hover,
-.darkmode .bootstrap-datetimepicker-widget table td.hour:hover,
-.darkmode .bootstrap-datetimepicker-widget table td.minute:hover,
-.darkmode .bootstrap-datetimepicker-widget table td span:hover,
-.darkmode .bootstrap-datetimepicker-widget table td.second:hover {
- background: var(--dGray4);
-}
-
-.darkmode .select2-container--default .select2-results__option[aria-selected=true]{
- background-color: var(--dBlue);
- color: var(--dGray0);
-}
-.darkmode .select2-search{
- background-color: var(--dGray2);
-}
-.darkmode .select2-search input{
- background-color: var(--dGray0);
-}
-.darkmode .dropdown-menu{
- background-color: var(--dGray5);
-}
-.darkmode .form-control{
- color: var(--dGray0);
-}
-.darkmode .form-control::placeholder{
- color: var(--dGray2);
-}
-.enter_darkmode>a {
- text-align: center;
}
\ No newline at end of file
diff --git a/app/static/css/themes/darkmode.css b/app/static/css/themes/darkmode.css
new file mode 100644
index 0000000..babb53d
--- /dev/null
+++ b/app/static/css/themes/darkmode.css
@@ -0,0 +1,111 @@
+/*Darkmode*/
+:root {
+ /*Darkmode colors*/
+ --dGray0:#D0D0D8;
+ --dGray1:#8E8E93;
+ --dGray2:#636366;
+ --dGray3:#48484A;
+ --dGray4:#3A3A3C;
+ --dGray5:#2C2C2E;
+ --dGray6:#1C1C1E;
+ --dBlue:#0A84FF;
+}
+.table-hover tbody tr:hover{
+ background-color: var(--dGray3);
+}
+body{
+ background-color: var(--dGray5);
+ color: var(--dGray1);
+}
+a {
+ color: var(--dBlue);
+}
+.btn-primary {
+ color: var(--dGray6);
+ background-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, h4, h5, h6{
+ color: var(--dGray1);
+}
+
+.jumbotron, .darker {
+ background-color: var(--dGray4);
+}
+.table tbody tr td {
+ border-top: 1px solid var(--dGray3);
+}
+.table thead tr th {
+ border-bottom: 2px solid var(--dGray2);
+}
+.navbar-toggle .icon-bar {
+ background-color: var(--dGray0);
+ opacity: 0.5;
+}
+.select2-container--default .select2-selection--single{
+ background-color: var(--dGray3);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+ color: var(--dGray0);
+}
+.select2-results__option{
+ background-color: var(--dGray5);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+ background-color: var(--dGray4);
+ color: var(--dGray0);
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td span:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+ background: var(--dGray4);
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+ background-color: var(--dBlue);
+ color: var(--dGray0);
+}
+.select2-search{
+ background-color: var(--dGray2);
+}
+.select2-search input{
+ background-color: var(--dGray0);
+}
+.dropdown-menu{
+ background-color: var(--dGray5);
+}
+.form-control{
+ color: var(--dGray0);
+}
+.form-control::placeholder{
+ color: var(--dGray2);
+}
+.enter_darkmode>a {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/app/static/css/themes/halloween.css b/app/static/css/themes/halloween.css
new file mode 100644
index 0000000..3ef45cd
--- /dev/null
+++ b/app/static/css/themes/halloween.css
@@ -0,0 +1,115 @@
+/*halloween*/
+
+:root {
+ /*Darkmode colors*/
+ --dGray0:#FFEB65;
+ --dGray1:#F28705;
+ --dGray2:#F25C05;
+ --dGray3:#F27405;
+ --dGray4:#8C3D0F;
+ --dGray5:#260101;
+ --dGray6:#260101;
+ --dBlue:#D91604;
+}
+.background{
+ background-image: url("static/images/Halloween.jpeg");
+}
+.table-hover tbody tr:hover{
+ background-color: var(--dGray3);
+}
+body{
+ background-color: var(--dGray5);
+ color: var(--dGray1);
+}
+a {
+ color: var(--dBlue);
+}
+.btn-primary {
+ color: var(--dGray6);
+ background-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, h4, h5, h6{
+ color: var(--dGray1);
+}
+
+.jumbotron, .darker {
+ background-color: var(--dGray4);
+}
+.table tbody tr td {
+ border-top: 1px solid var(--dGray3);
+}
+.table thead tr th {
+ border-bottom: 2px solid var(--dGray2);
+}
+.navbar-toggle .icon-bar {
+ background-color: var(--dGray0);
+ opacity: 0.5;
+}
+.select2-container--default .select2-selection--single{
+ background-color: var(--dGray3);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+ color: var(--dGray0);
+}
+.select2-results__option{
+ background-color: var(--dGray5);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+ background-color: var(--dGray4);
+ color: var(--dGray0);
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td span:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+ background: var(--dGray4);
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+ background-color: var(--dBlue);
+ color: var(--dGray0);
+}
+.select2-search{
+ background-color: var(--dGray2);
+}
+.select2-search input{
+ background-color: var(--dGray0);
+}
+.dropdown-menu{
+ background-color: var(--dGray5);
+}
+.form-control{
+ color: var(--dGray0);
+}
+.form-control::placeholder{
+ color: var(--dGray2);
+}
+.enter_darkmode>a {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/app/static/css/themes/kerstmis.css b/app/static/css/themes/kerstmis.css
new file mode 100644
index 0000000..806ddb2
--- /dev/null
+++ b/app/static/css/themes/kerstmis.css
@@ -0,0 +1,100 @@
+/*kerstmis*/
+.table-hover tbody tr:hover{
+ background-color: var(--dGray3);
+}
+body{
+ background-color: var(--dGray5);
+ color: var(--dGray1);
+}
+a {
+ color: var(--dBlue);
+}
+.btn-primary {
+ color: var(--dGray6);
+ background-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, h4, h5, h6{
+ color: var(--dGray1);
+}
+
+.jumbotron, .darker {
+ background-color: var(--dGray4);
+}
+.table tbody tr td {
+ border-top: 1px solid var(--dGray3);
+}
+.table thead tr th {
+ border-bottom: 2px solid var(--dGray2);
+}
+.navbar-toggle .icon-bar {
+ background-color: var(--dGray0);
+ opacity: 0.5;
+}
+.select2-container--default .select2-selection--single{
+ background-color: var(--dGray3);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+ color: var(--dGray0);
+}
+.select2-results__option{
+ background-color: var(--dGray5);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+ background-color: var(--dGray4);
+ color: var(--dGray0);
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td span:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+ background: var(--dGray4);
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+ background-color: var(--dBlue);
+ color: var(--dGray0);
+}
+.select2-search{
+ background-color: var(--dGray2);
+}
+.select2-search input{
+ background-color: var(--dGray0);
+}
+.dropdown-menu{
+ background-color: var(--dGray5);
+}
+.form-control{
+ color: var(--dGray0);
+}
+.form-control::placeholder{
+ color: var(--dGray2);
+}
+.enter_darkmode>a {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/app/static/css/themes/lightmode.css b/app/static/css/themes/lightmode.css
new file mode 100644
index 0000000..922fe9c
--- /dev/null
+++ b/app/static/css/themes/lightmode.css
@@ -0,0 +1,112 @@
+/*lightmode*/
+:root {
+ /*Darkmode colors*/
+ --dGray0:#444444;
+ --dGray1:#666666;
+ --dGray2:#212121;
+ --dGray3:#ffffff;
+ --dGray4:#f9f9f9;
+ --dGray5:#ffffff;
+ --dGray6:#ffffff;
+ --dBlue:#0A84FF;
+}
+
+.table-hover tbody tr:hover{
+ background-color: var(--dGray3);
+}
+body{
+ background-color: var(--dGray5);
+ color: var(--dGray1);
+}
+a {
+ color: var(--dBlue);
+}
+.btn-primary {
+ color: var(--dGray6);
+ background-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, h4, h5, h6{
+ color: var(--dGray1);
+}
+
+.jumbotron, .darker {
+ background-color: var(--dGray4);
+}
+.table tbody tr td {
+ border-top: 1px solid var(--dGray3);
+}
+.table thead tr th {
+ border-bottom: 2px solid var(--dGray2);
+}
+.navbar-toggle .icon-bar {
+ background-color: var(--dGray0);
+ opacity: 0.5;
+}
+.select2-container--default .select2-selection--single{
+ background-color: var(--dGray3);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+ color: var(--dGray0);
+}
+.select2-results__option{
+ background-color: var(--dGray5);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+ background-color: var(--dGray4);
+ color: var(--dGray0);
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td span:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+ background: var(--dGray4);
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+ background-color: var(--dBlue);
+ color: var(--dGray0);
+}
+.select2-search{
+ background-color: var(--dGray2);
+}
+.select2-search input{
+ background-color: var(--dGray0);
+}
+.dropdown-menu{
+ background-color: var(--dGray5);
+}
+.form-control{
+ color: var(--dGray0);
+}
+.form-control::placeholder{
+ color: var(--dGray2);
+}
+.enter_darkmode>a {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/app/static/css/themes/sinterklaas.css b/app/static/css/themes/sinterklaas.css
new file mode 100644
index 0000000..5aa555e
--- /dev/null
+++ b/app/static/css/themes/sinterklaas.css
@@ -0,0 +1,115 @@
+/*sinterklaas*/
+:root {
+ /*Darkmode colors*/
+ --dGray0:#F2EB80;
+ --dGray1:#F2EF05;
+ --dGray2:#F2EF05;
+ --dGray3:#177EBF;
+ --dGray4:#0C6AA6;
+ --dGray5:#F20505;
+ --dGray6:#F50B00;
+ --dBlue:#35F546;
+}
+
+.table-hover tbody tr:hover{
+ background-color: var(--dGray3);
+}
+.background{
+ background-image: url("static/images/Sinterklaas.jpg");
+}
+body{
+ background-color: var(--dGray5);
+ color: var(--dGray1);
+}
+a {
+ color: var(--dBlue);
+}
+.btn-primary {
+ color: var(--dGray6);
+ background-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, h4, h5, h6{
+ color: var(--dGray1);
+}
+
+.jumbotron, .darker {
+ background-color: var(--dGray4);
+}
+.table tbody tr td {
+ border-top: 1px solid var(--dGray3);
+}
+.table thead tr th {
+ border-bottom: 2px solid var(--dGray2);
+}
+.navbar-toggle .icon-bar {
+ background-color: var(--dGray0);
+ opacity: 0.5;
+}
+.select2-container--default .select2-selection--single{
+ background-color: var(--dGray3);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-selection--single .select2-selection__rendered{
+ color: var(--dGray0);
+}
+.select2-results__option{
+ background-color: var(--dGray5);
+ color: var(--dGray0);
+}
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
+ background-color: var(--dGray4);
+ color: var(--dGray0);
+}
+.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
+.bootstrap-datetimepicker-widget table td.day:hover,
+.bootstrap-datetimepicker-widget table td.hour:hover,
+.bootstrap-datetimepicker-widget table td.minute:hover,
+.bootstrap-datetimepicker-widget table td span:hover,
+.bootstrap-datetimepicker-widget table td.second:hover {
+ background: var(--dGray4);
+}
+
+.select2-container--default .select2-results__option[aria-selected=true]{
+ background-color: var(--dBlue);
+ color: var(--dGray0);
+}
+.select2-search{
+ background-color: var(--dGray2);
+}
+.select2-search input{
+ background-color: var(--dGray0);
+}
+.dropdown-menu{
+ background-color: var(--dGray5);
+}
+.form-control{
+ color: var(--dGray0);
+}
+.form-control::placeholder{
+ color: var(--dGray2);
+}
+.enter_darkmode>a {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/app/static/js/darkmode.js b/app/static/js/darkmode.js
deleted file mode 100644
index 2139cf4..0000000
--- a/app/static/js/darkmode.js
+++ /dev/null
@@ -1,108 +0,0 @@
-{
- const init = () => {
- 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 toggleBetween = (first, second) => {
- if(localStorage.getItem("theme") == second){
- localStorage.setItem("theme", first)
- }else{
- localStorage.setItem("theme", second)
- }
- reloadTheme();
- }
-
- 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 = () => {
- let root = document.documentElement;
- root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color
- root.style.setProperty('--dGray5', "#2C2C2E");
- root.style.setProperty('--dGray4', "#3A3A3C");
- root.style.setProperty('--dGray3', "#48484A");
- root.style.setProperty('--dGray2', "#636366");
- root.style.setProperty('--dGray1', "#8E8E93");
- root.style.setProperty('--dGray0', "#E0E0E8"); //Light color
- root.style.setProperty('--dBlue', "#0A84FF");
- document.querySelector('.background').style.backgroundImage = 'none';
- }
-
- const setThemeHalloween = () => {
- let root = document.documentElement;
- root.style.setProperty('--dGray6', "#260101"); //Dark color
- root.style.setProperty('--dGray5', "#260101");
- root.style.setProperty('--dGray4', "#8C3D0F");
- root.style.setProperty('--dGray3', "#F27405");
- root.style.setProperty('--dGray2', "#F25C05");
- root.style.setProperty('--dGray1', "#F28705");
- root.style.setProperty('--dGray0', "#FFEB65"); //Light color
- root.style.setProperty('--dBlue', "#D91604");
- 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();
-}
\ No newline at end of file
diff --git a/app/static/js/theme.js b/app/static/js/theme.js
new file mode 100644
index 0000000..a121175
--- /dev/null
+++ b/app/static/js/theme.js
@@ -0,0 +1,21 @@
+
+{
+ const init = () =>{
+ document.cookie.split('; ').forEach(itCookie = cookie =>{
+ if(cookie.split("=")[0] == "theme" && cookie.split("=")[1] == "darkmode"){
+ document.querySelector(".toggleDarkmode").innerHTML = "Enter lightmode"
+ document.querySelector(".toggleDarkmode").id = "lightmode"
+ }
+ });
+ document.querySelectorAll('.changeThemeButton').forEach(changeThemeButton= e => {e.addEventListener(`click`, handleClickChangeTheme)});
+ }
+
+ const handleClickChangeTheme = e =>{
+ document.cookie = "theme = "+e.currentTarget.id+";path=/";
+ location.reload();
+ }
+
+
+
+ init();
+}
\ No newline at end of file
diff --git a/app/templates/layout.html b/app/templates/layout.html
index 0875a35..d79f1a1 100644
--- a/app/templates/layout.html
+++ b/app/templates/layout.html
@@ -24,12 +24,13 @@ Haldis - {{ active_page|capitalize }}
{% block styles %}
{{ super() }}
+
{% endblock %}
{% block scripts %}
{{ super() }}
-
+
{% endblock %}
@@ -80,7 +81,7 @@ Haldis - {{ active_page|capitalize }}
diff --git a/app/templates/order_items.html b/app/templates/order_items.html
index 7f597af..70fc2d3 100644
--- a/app/templates/order_items.html
+++ b/app/templates/order_items.html
@@ -8,6 +8,7 @@ Haldis - Order {{ order.id }}
{% block styles %}
{{ super() }}
+
{% endblock %}
diff --git a/app/templates/profile.html b/app/templates/profile.html
index 2f49be0..52911bf 100644
--- a/app/templates/profile.html
+++ b/app/templates/profile.html
@@ -4,5 +4,5 @@
{% block container %}
{{ current_user.username }}
Themes
- enable custom themes
+ enable custom themes
{% endblock %}
diff --git a/app/views/general.py b/app/views/general.py
index d8423b4..fc13ae3 100644
--- a/app/views/general.py
+++ b/app/views/general.py
@@ -2,6 +2,8 @@
import os
from datetime import datetime, timedelta
+from flask import Flask, render_template, make_response
+from flask import request
from flask import Blueprint, abort
from flask import current_app as app
from flask import render_template, send_from_directory, url_for
@@ -25,6 +27,21 @@ def home() -> str:
"home.html", orders=get_orders(), recently_closed=recently_closed
)
+@general_bp.route("/css")
+def css():
+ "Generate the css"
+ if request.cookies.get('theme'):
+ if request.cookies['theme'] == 'customTheme':
+ #TODO: The custom theme is hardcoded :(. Make the server auto select a custom team.
+ f = open("app/static/css/themes/sinterklaas.css")
+ else:
+ f = open("app/static/css/themes/"+request.cookies['theme']+".css")
+ else:
+ f = open("app/static/css/main.css")
+ response = make_response(f.read())
+ response.headers['Content-Type'] = 'text/css'
+ return response
+
@general_bp.route("/map")
def map_view() -> str: