|
|
@ -1,32 +1,47 @@ |
|
|
|
function changeTheme(e) { |
|
|
|
function changeTheme(e) { |
|
|
|
|
|
|
|
//is this the initial load, or an event from changing theme dropdown
|
|
|
|
var theme = e ? this.value : localStorage.getItem('theme'); |
|
|
|
var theme = e ? this.value : localStorage.getItem('theme'); |
|
|
|
|
|
|
|
//first visit, set theme to default
|
|
|
|
if (!theme) { |
|
|
|
if (!theme) { |
|
|
|
theme = 'default'; |
|
|
|
theme = 'default'; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//add theme setting to localstorage
|
|
|
|
localStorage.setItem('theme', theme); |
|
|
|
localStorage.setItem('theme', theme); |
|
|
|
|
|
|
|
//check for theme style tag
|
|
|
|
var custom = document.getElementById('customtheme'); |
|
|
|
var custom = document.getElementById('customtheme'); |
|
|
|
if (theme === 'default') { |
|
|
|
if (theme === 'default') { |
|
|
|
if (custom) { |
|
|
|
if (custom) { |
|
|
|
custom.remove(); |
|
|
|
//remove theme style tag if we switching to default
|
|
|
|
} |
|
|
|
custom.remove(); |
|
|
|
|
|
|
|
} |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
|
|
|
|
//path of the theme css
|
|
|
|
var path = '/css/themes/'+theme+'.css'; |
|
|
|
var path = '/css/themes/'+theme+'.css'; |
|
|
|
|
|
|
|
//get the raw css from localstorage
|
|
|
|
var css = localStorage.getItem(path); |
|
|
|
var css = localStorage.getItem(path); |
|
|
|
if (!custom) { |
|
|
|
if (!custom) { |
|
|
|
custom = document.createElement('style'); |
|
|
|
//create the style tag if it doesnt exist
|
|
|
|
custom.id = 'customtheme'; |
|
|
|
custom = document.createElement('style'); |
|
|
|
document.head.appendChild(custom); |
|
|
|
custom.id = 'customtheme'; |
|
|
|
} |
|
|
|
document.head.appendChild(custom); |
|
|
|
|
|
|
|
} |
|
|
|
if (css) { |
|
|
|
if (css) { |
|
|
|
|
|
|
|
//if we have the css in localstorage, set it (prevents FOUC)
|
|
|
|
custom.innerHTML = css; |
|
|
|
custom.innerHTML = css; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
//then createa new link rel=stylesheet, and load the css
|
|
|
|
var tempLink = document.createElement('link'); |
|
|
|
var tempLink = document.createElement('link'); |
|
|
|
tempLink.rel = 'stylesheet'; |
|
|
|
tempLink.rel = 'stylesheet'; |
|
|
|
tempLink.onload = function() { |
|
|
|
tempLink.onload = function() { |
|
|
|
css = tempLink.sheet.rules[0].cssText; |
|
|
|
css = ''; |
|
|
|
|
|
|
|
for(var i = 0; i < tempLink.sheet.rules.length; i++) { |
|
|
|
|
|
|
|
css += tempLink.sheet.rules[i].cssText; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
//update our localstorage with latest version
|
|
|
|
localStorage.setItem(path, css); |
|
|
|
localStorage.setItem(path, css); |
|
|
|
custom.innerHTML = css; |
|
|
|
custom.innerHTML = css; |
|
|
|
tempLink.remove(); |
|
|
|
//immediately remove it since we dont need it
|
|
|
|
|
|
|
|
custom.remove(); |
|
|
|
} |
|
|
|
} |
|
|
|
tempLink.href = path; |
|
|
|
tempLink.href = path; |
|
|
|
document.head.appendChild(tempLink); |
|
|
|
document.head.appendChild(tempLink); |
|
|
@ -38,10 +53,8 @@ changeTheme(); |
|
|
|
window.addEventListener('DOMContentLoaded', (event) => { |
|
|
|
window.addEventListener('DOMContentLoaded', (event) => { |
|
|
|
|
|
|
|
|
|
|
|
var themePicker = document.getElementById('theme-changer'); |
|
|
|
var themePicker = document.getElementById('theme-changer'); |
|
|
|
var theme = localStorage.getItem('theme'); |
|
|
|
themePicker.value = localStorage.getItem('theme') |
|
|
|
if (theme) { |
|
|
|
|
|
|
|
themePicker.value = theme; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
themePicker.addEventListener('change', changeTheme, false); |
|
|
|
themePicker.addEventListener('change', changeTheme, false); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|