Changed the way themes work. The client sends a cookie containing the theme which the server uses to send the correct css file.

This commit is contained in:
kindtanton 2019-11-21 10:52:08 +01:00
parent da8ad21119
commit 608e708a1d
13 changed files with 706 additions and 212 deletions

110
app/static/css/darkmode.css Normal file
View file

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

View file

@ -86,10 +86,6 @@ div.box:hover {
box-shadow: 2px 4px 4px -1px #888888; box-shadow: 2px 4px 4px -1px #888888;
} }
.darkmode .table-hover tbody tr:hover{
background-color: var(--dGray3);
}
a.divLink { a.divLink {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -120,101 +116,4 @@ a.divLink {
.hidden { .hidden {
display: none; 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;
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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();
}

21
app/static/js/theme.js Normal file
View file

@ -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 = "<a>Enter lightmode</a>"
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();
}

View file

@ -24,12 +24,13 @@ Haldis - {{ active_page|capitalize }}
{% block styles %} {% block styles %}
{{ super() }} {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen"> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
<link rel="stylesheet" href="/css" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print"> <link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script type="text/javascript" src="{{ url_for('static', filename='js/darkmode.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/theme.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
{% endblock %} {% endblock %}
@ -80,7 +81,7 @@ Haldis - {{ active_page|capitalize }}
<div class="container"> <div class="container">
<div class="footerWrapper"> <div class="footerWrapper">
<div class="pull-left">Made with ❤ by <a href="http://zeus.ugent.be">Zeus WPI</a></div> <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="changeThemeButton toggleDarkmode" id="darkmode"><a>Enter darkmode</a></div>
<div class="pull-right"><a href="http://github.com/ZeusWPI/Haldis">© {{ ""|year }}</a></div> <div class="pull-right"><a href="http://github.com/ZeusWPI/Haldis">© {{ ""|year }}</a></div>
</div> </div>
</div> </div>

View file

@ -8,6 +8,7 @@ Haldis - Order {{ order.id }}
{% block styles %} {% block styles %}
{{ super() }} {{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen"> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}" media="screen">
<link rel="stylesheet" href="/css" media="screen">
<link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print"> <link rel="stylesheet" href="{{ url_for('static', filename='css/print.css') }}" media="print">
{% endblock %} {% endblock %}

View file

@ -4,5 +4,5 @@
{% block container %} {% block container %}
<h1>{{ current_user.username }}</h1> <h1>{{ current_user.username }}</h1>
<h3>Themes</h3> <h3>Themes</h3>
<p><a class="custom__themes">enable custom themes</a></p> <p><a class="changeThemeButton" id="customTheme">enable custom themes</a></p>
{% endblock %} {% endblock %}

View file

@ -2,6 +2,8 @@
import os import os
from datetime import datetime, timedelta 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 Blueprint, abort
from flask import current_app as app from flask import current_app as app
from flask import render_template, send_from_directory, url_for 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 "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") @general_bp.route("/map")
def map_view() -> str: def map_view() -> str: