93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
|
window.onload = () => {
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/* SIDEBAR & FOOTER LOAD START */
|
||
|
|
|
||
|
|
fetch('/assets/templates/nav.html') // the page we want to use for our sidebar
|
||
|
|
.then(data => {
|
||
|
|
return data.text()
|
||
|
|
})
|
||
|
|
.then( data => {
|
||
|
|
document.getElementById("nav").innerHTML = data; // inserts to element id="navbar"
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
/* SIDEBAR & FOOTER LOAD END */
|
||
|
|
|
||
|
|
/* THEME SWITCHER START */
|
||
|
|
|
||
|
|
function catCafe() {
|
||
|
|
document.documentElement.style.setProperty("--background", "#D6D8CC");
|
||
|
|
document.documentElement.style.setProperty("--titleBars", "url('https://sadgrl.online/assets/images/tiny-bar-brwn.png')");
|
||
|
|
document.documentElement.style.setProperty("--banner", "url('https://sadgrl.online/assets/images/full-banner-cafe.png')");
|
||
|
|
document.documentElement.style.setProperty("--text-color", "black");
|
||
|
|
document.documentElement.style.setProperty("--link-color", "black");
|
||
|
|
document.documentElement.style.setProperty("--background-img", "url('https://sadgrl.online/assets/images/calico-bg.png')");
|
||
|
|
document.documentElement.style.setProperty("--border", "1px solid #8F563B;");
|
||
|
|
//document.documentElement.style.setProperty("--arrows", "url('https://sadgrl.online/assets/images/arrow-brwn.png')");
|
||
|
|
}
|
||
|
|
|
||
|
|
function sadGrl() {
|
||
|
|
document.documentElement.style.setProperty("--background", "#0E191A");
|
||
|
|
document.documentElement.style.setProperty("--titleBars", "url('https://sadgrl.online/assets/images/tiny-bar-2.png')");
|
||
|
|
document.documentElement.style.setProperty("--banner", "url('https://sadgrl.online/assets/images/full-banner-new.png')");
|
||
|
|
document.documentElement.style.setProperty("--text-color", "white");
|
||
|
|
document.documentElement.style.setProperty("--link-color", "#B5E61D");
|
||
|
|
document.documentElement.style.setProperty("--background-img", "url('../assets/img/bg.jpg')");
|
||
|
|
document.documentElement.style.setProperty("--border", "1px solid black");
|
||
|
|
// document.documentElement.style.setProperty("--arrows", "url('../assets/images/arrow.png')");
|
||
|
|
}
|
||
|
|
if (localStorage.getItem('currentTheme')) {
|
||
|
|
if (localStorage.getItem('currentTheme') === "catcafe") {
|
||
|
|
catCafe();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* create the dropdown */
|
||
|
|
var sideBar = document.querySelectorAll('aside')[0];
|
||
|
|
var themeDiv = document.createElement('div');
|
||
|
|
themeDiv.setAttribute('id', 'themeDiv');
|
||
|
|
|
||
|
|
var select = document.createElement('select');
|
||
|
|
select.setAttribute('name', 'themePicker');
|
||
|
|
select.setAttribute('id', 'themePicker');
|
||
|
|
select.style.marginLeft = "10px";
|
||
|
|
select.style.marginBottom = "10px";
|
||
|
|
|
||
|
|
var option0 = document.createElement('option');
|
||
|
|
var option1 = document.createElement('option');
|
||
|
|
var option2 = document.createElement('option');
|
||
|
|
option0.value = "chooseTheme";
|
||
|
|
option1.value = "sadgrl";
|
||
|
|
option2.value = "catcafe";
|
||
|
|
option0.innerText = "Choose theme";
|
||
|
|
option1.innerText = "sadgrl.online";
|
||
|
|
option2.innerText = "cozy cat cafe";
|
||
|
|
|
||
|
|
select.append(option0);
|
||
|
|
select.append(option1);
|
||
|
|
select.append(option2);
|
||
|
|
|
||
|
|
themeDiv.append(select);
|
||
|
|
|
||
|
|
sideBar.append(themeDiv);
|
||
|
|
|
||
|
|
select.addEventListener("change", changeTheme);
|
||
|
|
|
||
|
|
function changeTheme(e) {
|
||
|
|
var value = e.target.value;
|
||
|
|
console.log(value);
|
||
|
|
|
||
|
|
if (value === "catcafe") {
|
||
|
|
catCafe();
|
||
|
|
localStorage.setItem('currentTheme', value);
|
||
|
|
} else if (value === "sadgrl") {
|
||
|
|
sadGrl();
|
||
|
|
localStorage.setItem('currentTheme', value);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
/* THEME SWITCHER END */
|
||
|
|
}
|