Add localstorage control

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);