added Halloween theme

This commit is contained in:
kindtanton 2019-10-30 23:40:36 +01:00
parent 3f045c54e4
commit 6e3e5e7fb5
4 changed files with 70 additions and 1 deletions

View file

@ -10,9 +10,16 @@
--dGray6:#1C1C1E;
--dBlue:#0A84FF;
}
html {
height: 100%;
}
body {
padding-top: 70px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100%;
}
.padding-top {
@ -97,6 +104,10 @@ a.divLink {
margin: 0 1rem;
}
.hidden {
display: none;
}
.darkmode {
background-color: var(--dGray5);
color: var(--dGray1);

Binary file not shown.

After

Width:  |  Height:  |  Size: 993 KiB

View file

@ -1,7 +1,14 @@
{
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();
}
@ -11,6 +18,7 @@
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')){
@ -24,5 +32,53 @@
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();
}else{
localStorage.setItem("customThemes", 'true');
localStorage.setItem("darkmodeChanged", 'true');
localStorage.setItem("darkmode", 'true');
enableDarkmode();
setThemeHalloween();
}
}
const setTheme = theme =>{
switch(theme){
case "halloween":
setThemeHalloween();
}
}
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");
root.style.setProperty('--dGray4', "#3A3A3C");
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('--dBlue', "#0A84FF");
document.body.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");
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.body.style.backgroundImage = "url('/static/images/Halloween.jpeg')";
}
init();
}

View file

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