summaryrefslogtreecommitdiff
path: root/themes/elenq/static/js
diff options
context:
space:
mode:
Diffstat (limited to 'themes/elenq/static/js')
-rw-r--r--themes/elenq/static/js/colorscheme-switcher.js48
1 files changed, 33 insertions, 15 deletions
diff --git a/themes/elenq/static/js/colorscheme-switcher.js b/themes/elenq/static/js/colorscheme-switcher.js
index 889b0dd..63c0abb 100644
--- a/themes/elenq/static/js/colorscheme-switcher.js
+++ b/themes/elenq/static/js/colorscheme-switcher.js
@@ -1,23 +1,29 @@
var theme_switch = document.getElementById("dark-light-switch");
-
var body = document.getElementsByTagName("BODY")[0];
+
+
function init( color ){
+ change(color, true)
+ localStorage.setItem('color', color);
theme_switch.setAttribute("color", color);
- document.getElementById("dark-light-switch");
}
+function change(color, nowait){
+ // Discard transition is nowait is set
+ if(nowait !== true){
+ window.setTimeout(function() {
+ document.documentElement.classList.remove('color-theme-in-transition')
+ }, 1000)
+ document.documentElement.classList.add('color-theme-in-transition');
+ }
-function change(color){
- window.setTimeout(function() {
- document.documentElement.classList.remove('color-theme-in-transition')
- }, 1000)
- document.documentElement.classList.add('color-theme-in-transition');
document.documentElement.setAttribute('data-theme', color);
theme_switch.setAttribute("color", color);
+ localStorage.setItem("color", color);
}
-function theme_changed(){
+function theme_change_requested(){
color = theme_switch.getAttribute("color");
if(color=="light")
change("dark");
@@ -25,11 +31,23 @@ function theme_changed(){
change("light");
}
-var background = getComputedStyle(body).getPropertyValue("background-color");
-if(background == "rgb(255, 255, 255)") {
- init("light");
-} else {
- init("dark");
+function getCurrentColor(){
+ // Color was set befor in localStorage
+ var storage_color = localStorage.getItem("color");
+ if(storage_color !== null){
+ return storage_color;
+ }
+
+ // If local storage is not set check the background of the page
+ // This is dependant of the CSS, be careful
+ var background = getComputedStyle(body).getPropertyValue("background-color");
+ if(background == "rgb(255, 255, 255)") {
+ return "light";
+ } else {
+ return "dark";
+ }
}
-theme_switch.addEventListener("click", theme_changed);
-theme_switch.addEventListener("touch", theme_changed);
+
+init( getCurrentColor() )
+theme_switch.addEventListener("click", theme_change_requested);
+theme_switch.addEventListener("touch", theme_change_requested);