Merge pull request #160 from ZeusWPI/sint-theme

Added 'sinterklaas' theme
This commit is contained in:
Arnhoudt 2019-11-16 16:39:32 +01:00 committed by GitHub
commit 31cd09d94f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 94 additions and 63 deletions

View file

@ -1,7 +1,7 @@
/* Custom CSS */ /* Custom CSS */
:root { :root {
/*Darkmode colors*/ /*Darkmode colors*/
--dGray0:#B0B0B8; --dGray0:#D0D0D8;
--dGray1:#8E8E93; --dGray1:#8E8E93;
--dGray2:#636366; --dGray2:#636366;
--dGray3:#48484A; --dGray3:#48484A;
@ -16,10 +16,24 @@ html {
body { body {
padding-top: 70px; padding-top: 70px;
height: 100%;
}
.background{
position: absolute;
z-index: -1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
height: 100%; -webkit-filter: blur(2px) brightness(50%);
-moz-filter: blur(2px) brightness(50%);
-o-filter: blur(2px) brightness(50%);
-ms-filter: blur(2px) brightness(50%);
filter: blur(2px) brightness(50%);
} }
.padding-top { .padding-top {
@ -116,7 +130,7 @@ a.divLink {
color: var(--dBlue); color: var(--dBlue);
} }
.darkmode .btn-primary { .darkmode .btn-primary {
color: white; color: var(--dGray6);
background-color: var(--dBlue); background-color: var(--dBlue);
} }
@ -141,17 +155,10 @@ a.divLink {
border-top: 1px solid var(--dGray2); border-top: 1px solid var(--dGray2);
} }
.darkmode h1, .darkmode h2, .darkmode h3{ .darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6{
color: var(--dGray0);
}
.darkmode h4, .darkmode h5{
color: var(--dGray1); color: var(--dGray1);
} }
.darkmode h6, .darkmode .h1, .darkmode .h2, .darkmode .h3, .darkmode .h4, .darkmode .h5, .darkmode .h6 {
color: var(--dGray3);
}
.darkmode .jumbotron, .darkmode .darker { .darkmode .jumbotron, .darkmode .darker {
background-color: var(--dGray4); background-color: var(--dGray4);
} }
@ -167,7 +174,6 @@ a.divLink {
} }
.darkmode .select2-container--default .select2-selection--single{ .darkmode .select2-container--default .select2-selection--single{
background-color: var(--dGray3); background-color: var(--dGray3);
border: 1px solid var(--dGray1);
color: var(--dGray0); color: var(--dGray0);
} }
.darkmode .select2-container--default .select2-selection--single .select2-selection__rendered{ .darkmode .select2-container--default .select2-selection--single .select2-selection__rendered{
@ -192,7 +198,7 @@ a.divLink {
.darkmode .select2-container--default .select2-results__option[aria-selected=true]{ .darkmode .select2-container--default .select2-results__option[aria-selected=true]{
background-color: var(--dBlue); background-color: var(--dBlue);
color: white; color: var(--dGray0);
} }
.darkmode .select2-search{ .darkmode .select2-search{
background-color: var(--dGray2); background-color: var(--dGray2);
@ -204,7 +210,7 @@ a.divLink {
background-color: var(--dGray5); background-color: var(--dGray5);
} }
.darkmode .form-control{ .darkmode .form-control{
color: white; color: var(--dGray0);
} }
.darkmode .form-control::placeholder{ .darkmode .form-control::placeholder{
color: var(--dGray2); color: var(--dGray2);

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View file

@ -1,60 +1,71 @@
{ {
var $darkmode = document.querySelector(".enter_darkmode");
var $customThemes = document.querySelector(".custom__themes");
const init = () => { const init = () => {
$darkmode.addEventListener("click", toggleDarkmode); const $darkmode = document.querySelector(".enter_darkmode");
if($customThemes){ if($darkmode) $darkmode.addEventListener("click", ()=>toggleBetween("lightmode", "darkmode"));
$customThemes.addEventListener("click", toggleCustomThemes); const $customThemes = document.querySelector(".custom__themes");
} if($customThemes) $customThemes.addEventListener("click", ()=>toggleBetween("darkmode", "sinterklaas")); //TODO: Create automatic custom team selector
if(localStorage.getItem("customThemes") == 'true'){
setThemeHalloween(); reloadTheme();
}
enableDarkmode();
} }
const toggleDarkmode = () => { const toggleBetween = (first, second) => {
localStorage.setItem("darkmodeChanged", 'true'); if(localStorage.getItem("theme") == second){
var newState = !(localStorage.getItem("darkmode") == 'true'); localStorage.setItem("theme", first)
localStorage.setItem("darkmode", newState); }else{
enableDarkmode(); localStorage.setItem("theme", second)
}
reloadTheme();
} }
const enableDarkmode = () => { const reloadTheme = () => {
if (typeof(Storage) !== "undefined") { if (typeof(Storage) !== "undefined") {
if(localStorage.getItem("darkmode") == 'true' && localStorage.getItem("darkmodeChanged") == 'true' || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem("darkmodeChanged") != 'true')){ 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.remove('lightmode');
document.querySelector('body').classList.add('darkmode'); document.querySelector('body').classList.add('darkmode');
} else {
document.querySelector('body').classList.remove('darkmode');
document.querySelector('body').classList.add('lightmode');
} }
} else { } else {
console.log('You browser does not support local storage, no darkmode for you!' ) console.log('You browser does not support local storage, no darkmode for you!' )
} }
} }
const toggleCustomThemes = () => { const setTheme = () =>{
if(localStorage.getItem("customThemes") == 'true'){ document.querySelector('body').classList.add('darkmode');
localStorage.setItem("customThemes", 'false'); switch(localStorage.getItem("theme")){
setThemeDarkMode(); case "halloween":
}else{
localStorage.setItem("customThemes", 'true');
localStorage.setItem("darkmodeChanged", 'true');
localStorage.setItem("darkmode", 'true');
enableDarkmode();
setThemeHalloween(); setThemeHalloween();
break;
case "sinterklaas":
setThemeSinterklaas();
break;
case "darkmode":
setThemeDarkMode();
break;
case "lightmode":
default:
setThemeLightMode();
break;
} }
} }
const setTheme = theme =>{ //TODO: Use an external file to load themes
switch(theme){ //TODO: Darkness and blur variables
case "halloween":
setThemeHalloween(); 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 = () => { const setThemeDarkMode = () => {
document.querySelector('.enter_darkmode').classList.remove("hidden");
let root = document.documentElement; let root = document.documentElement;
root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color
root.style.setProperty('--dGray5', "#2C2C2E"); root.style.setProperty('--dGray5', "#2C2C2E");
@ -62,13 +73,12 @@
root.style.setProperty('--dGray3', "#48484A"); root.style.setProperty('--dGray3', "#48484A");
root.style.setProperty('--dGray2', "#636366"); root.style.setProperty('--dGray2', "#636366");
root.style.setProperty('--dGray1', "#8E8E93"); root.style.setProperty('--dGray1', "#8E8E93");
root.style.setProperty('--dGray0', "#B0B0B8"); //Light color root.style.setProperty('--dGray0', "#E0E0E8"); //Light color
root.style.setProperty('--dBlue', "#0A84FF"); root.style.setProperty('--dBlue', "#0A84FF");
document.body.style.backgroundImage = 'none'; document.querySelector('.background').style.backgroundImage = 'none';
} }
const setThemeHalloween = () => { const setThemeHalloween = () => {
document.querySelector('.enter_darkmode').classList.add("hidden");
let root = document.documentElement; let root = document.documentElement;
root.style.setProperty('--dGray6', "#260101"); //Dark color root.style.setProperty('--dGray6', "#260101"); //Dark color
root.style.setProperty('--dGray5', "#260101"); root.style.setProperty('--dGray5', "#260101");
@ -78,7 +88,21 @@
root.style.setProperty('--dGray1', "#F28705"); root.style.setProperty('--dGray1', "#F28705");
root.style.setProperty('--dGray0', "#FFEB65"); //Light color root.style.setProperty('--dGray0', "#FFEB65"); //Light color
root.style.setProperty('--dBlue', "#D91604"); root.style.setProperty('--dBlue', "#D91604");
document.body.style.backgroundImage = "url('/static/images/Halloween.jpeg')"; 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(); init();
} }

View file

@ -29,11 +29,12 @@ Haldis - {{ active_page|capitalize }}
{% block scripts %} {% block scripts %}
{{ super() }} {{ super() }}
<script src="{{ url_for('static', filename='js/darkmode.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
<script src="{{ url_for('static', filename='js/timer.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
{% endblock %} {% endblock %}
{% block navbar %} {% block navbar %}
<div class="background"></div>
<nav class="navbar navbar-default navbar-fixed-top"> <nav class="navbar navbar-default navbar-fixed-top">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">