2021-09-16 13:53:21 +00:00
|
|
|
var themeSelector = $("#theme-selector");
|
2021-02-28 00:34:59 +00:00
|
|
|
window.addEventListener("load", function () {
|
2021-09-16 13:53:21 +00:00
|
|
|
if (themeSelector) {
|
2021-02-28 00:34:59 +00:00
|
|
|
initTheme();
|
2021-09-16 13:53:21 +00:00
|
|
|
themeSelector.on('change', function() {
|
|
|
|
resetTheme(this.value);
|
2021-02-28 00:34:59 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Summary: function that adds or removes the attribute 'data-theme' depending if
|
|
|
|
* the switch is 'on' or 'off'.
|
|
|
|
*
|
|
|
|
* Description: initTheme is a function that uses localStorage from JavaScript DOM,
|
|
|
|
* to store the value of the HTML switch. If the switch was already switched to
|
2021-02-28 21:06:23 +00:00
|
|
|
* 'on' it will set an HTML attribute to the body named: 'data-theme' to a 'light'
|
2021-02-28 00:34:59 +00:00
|
|
|
* value. If it is the first time opening the page, or if the switch was off the
|
|
|
|
* 'data-theme' attribute will not be set.
|
|
|
|
* @return {void}
|
|
|
|
*/
|
|
|
|
function initTheme() {
|
2021-09-16 13:53:21 +00:00
|
|
|
var currentTheme = localStorage.getItem("currentTheme");
|
|
|
|
|
2021-09-16 14:02:49 +00:00
|
|
|
if (currentTheme == null) {
|
2021-09-16 13:53:21 +00:00
|
|
|
document.body.removeAttribute("data-theme")
|
|
|
|
} else {
|
|
|
|
document.body.setAttribute("data-theme", currentTheme)
|
2021-09-16 14:02:49 +00:00
|
|
|
$("#theme-selector").val(currentTheme).change();
|
2021-09-16 13:53:21 +00:00
|
|
|
}
|
2021-02-28 00:34:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Summary: resetTheme checks if the switch is 'on' or 'off' and if it is toggled
|
2021-02-28 21:06:23 +00:00
|
|
|
* on it will set the HTML attribute 'data-theme' to light so the light-theme CSS is
|
2021-02-28 00:34:59 +00:00
|
|
|
* applied.
|
|
|
|
* @return {void}
|
|
|
|
*/
|
2021-09-16 13:53:21 +00:00
|
|
|
function resetTheme(currentTheme) {
|
|
|
|
if (currentTheme !== "dark") {
|
|
|
|
document.body.setAttribute("data-theme", currentTheme);
|
|
|
|
localStorage.setItem("currentTheme", currentTheme);
|
2021-02-28 00:34:59 +00:00
|
|
|
} else {
|
|
|
|
document.body.removeAttribute("data-theme");
|
2021-09-16 13:53:21 +00:00
|
|
|
localStorage.removeItem("currentTheme");
|
2021-02-28 00:34:59 +00:00
|
|
|
}
|
|
|
|
}
|