Added 'sinterklaas' theme
This commit is contained in:
kindtanton
parent
4c227c9a85
commit
cd47d05c16
4 changed files with 94 additions and 63 deletions
|
|
@ -1,7 +1,7 @@
|
|||
/* Custom CSS */
|
||||
:root {
|
||||
/*Darkmode colors*/
|
||||
--dGray0:#B0B0B8;
|
||||
--dGray0:#D0D0D8;
|
||||
--dGray1:#8E8E93;
|
||||
--dGray2:#636366;
|
||||
--dGray3:#48484A;
|
||||
|
|
@ -16,10 +16,24 @@ html {
|
|||
|
||||
body {
|
||||
padding-top: 70px;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
.background{
|
||||
position: absolute;
|
||||
z-index: -1000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
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 {
|
||||
|
|
@ -116,7 +130,7 @@ a.divLink {
|
|||
color: var(--dBlue);
|
||||
}
|
||||
.darkmode .btn-primary {
|
||||
color: white;
|
||||
color: var(--dGray6);
|
||||
background-color: var(--dBlue);
|
||||
}
|
||||
|
||||
|
|
@ -141,17 +155,10 @@ a.divLink {
|
|||
border-top: 1px solid var(--dGray2);
|
||||
}
|
||||
|
||||
.darkmode h1, .darkmode h2, .darkmode h3{
|
||||
color: var(--dGray0);
|
||||
}
|
||||
|
||||
.darkmode h4, .darkmode h5{
|
||||
.darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6{
|
||||
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);
|
||||
}
|
||||
|
|
@ -167,7 +174,6 @@ a.divLink {
|
|||
}
|
||||
.darkmode .select2-container--default .select2-selection--single{
|
||||
background-color: var(--dGray3);
|
||||
border: 1px solid var(--dGray1);
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.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]{
|
||||
background-color: var(--dBlue);
|
||||
color: white;
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .select2-search{
|
||||
background-color: var(--dGray2);
|
||||
|
|
@ -204,7 +210,7 @@ a.divLink {
|
|||
background-color: var(--dGray5);
|
||||
}
|
||||
.darkmode .form-control{
|
||||
color: white;
|
||||
color: var(--dGray0);
|
||||
}
|
||||
.darkmode .form-control::placeholder{
|
||||
color: var(--dGray2);
|
||||
|
|
|
|||
BIN
app/static/images/Sinterklaas.jpg
Normal file
BIN
app/static/images/Sinterklaas.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
|
|
@ -1,60 +1,71 @@
|
|||
{
|
||||
var $darkmode = document.querySelector(".enter_darkmode");
|
||||
var $customThemes = document.querySelector(".custom__themes");
|
||||
const init = () => {
|
||||
$darkmode.addEventListener("click", toggleDarkmode);
|
||||
if($customThemes){
|
||||
$customThemes.addEventListener("click", toggleCustomThemes);
|
||||
}
|
||||
if(localStorage.getItem("customThemes") == 'true'){
|
||||
setThemeHalloween();
|
||||
}
|
||||
enableDarkmode();
|
||||
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 toggleDarkmode = () => {
|
||||
localStorage.setItem("darkmodeChanged", 'true');
|
||||
var newState = !(localStorage.getItem("darkmode") == 'true');
|
||||
localStorage.setItem("darkmode", newState);
|
||||
enableDarkmode();
|
||||
}
|
||||
|
||||
const enableDarkmode = () => {
|
||||
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')){
|
||||
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!' )
|
||||
}
|
||||
}
|
||||
|
||||
const toggleCustomThemes = () => {
|
||||
if(localStorage.getItem("customThemes") == 'true'){
|
||||
localStorage.setItem("customThemes", 'false');
|
||||
setThemeDarkMode();
|
||||
const toggleBetween = (first, second) => {
|
||||
if(localStorage.getItem("theme") == second){
|
||||
localStorage.setItem("theme", first)
|
||||
}else{
|
||||
localStorage.setItem("customThemes", 'true');
|
||||
localStorage.setItem("darkmodeChanged", 'true');
|
||||
localStorage.setItem("darkmode", 'true');
|
||||
enableDarkmode();
|
||||
setThemeHalloween();
|
||||
localStorage.setItem("theme", second)
|
||||
}
|
||||
reloadTheme();
|
||||
}
|
||||
|
||||
const setTheme = theme =>{
|
||||
switch(theme){
|
||||
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 = () => {
|
||||
document.querySelector('.enter_darkmode').classList.remove("hidden");
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#2C2C2E");
|
||||
|
|
@ -62,13 +73,12 @@
|
|||
root.style.setProperty('--dGray3', "#48484A");
|
||||
root.style.setProperty('--dGray2', "#636366");
|
||||
root.style.setProperty('--dGray1', "#8E8E93");
|
||||
root.style.setProperty('--dGray0', "#B0B0B8"); //Light color
|
||||
root.style.setProperty('--dGray0', "#E0E0E8"); //Light color
|
||||
root.style.setProperty('--dBlue', "#0A84FF");
|
||||
document.body.style.backgroundImage = 'none';
|
||||
document.querySelector('.background').style.backgroundImage = 'none';
|
||||
}
|
||||
|
||||
const setThemeHalloween = () => {
|
||||
document.querySelector('.enter_darkmode').classList.add("hidden");
|
||||
let root = document.documentElement;
|
||||
root.style.setProperty('--dGray6', "#260101"); //Dark color
|
||||
root.style.setProperty('--dGray5', "#260101");
|
||||
|
|
@ -78,7 +88,21 @@
|
|||
root.style.setProperty('--dGray1', "#F28705");
|
||||
root.style.setProperty('--dGray0', "#FFEB65"); //Light color
|
||||
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();
|
||||
}
|
||||
|
|
@ -29,11 +29,12 @@ 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>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/darkmode.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ url_for('static', filename='js/timer.js') }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block navbar %}
|
||||
<div class="background"></div>
|
||||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
|
|
|
|||
Loading…
Reference in a new issue