[feature] adding random accent colour

index.html

@@ -252,6 +252,13 @@
               <label for="control-link-sort-letter"><span class="label-icon"></span>Letter</label>
             </div>
           </div>
+          <div class="menu-item">
+            <h1 class="menu-header">Theme</h1>
+            <div class="checkbox-wrap">
+              <input id="control-layout-theme-random" class="control-layout-theme-random" type="checkbox" tabindex="1">
+              <label for="control-layout-theme-random"><span class="label-icon"></span>Random Accent colour on load/refresh</label>
+            </div>
+          </div>
         </div>
         <div class="menu-content-area menu-content-area-layout is-hidden">
           <div class="menu-item">

js/control.js

@@ -202,12 +202,20 @@ var control = (function() {
     }, false);
     helper.e(".control-layout-theme").addEventListener("change", function() {
       state.change({
-        path: "layout.theme",
+        path: "layout.theme.current",
         value: helper.hexToRgb(this.value)
       });
       theme.render();
       data.save();
     }, false);
+    helper.e(".control-layout-theme-random").addEventListener("change", function() {
+      state.change({
+        path: "layout.theme.random",
+        value: this.checked
+      });
+      theme.render();
+      data.save();
+    }, false);
     helper.e(".control-link-new-tab").addEventListener("change", function() {
       state.change({
         path: "link.newTab",
@@ -227,7 +235,6 @@ var control = (function() {
         data.save();
       }, false);
     });
-
     helper.eA("input[name='control-link-sort']").forEach(function(arrayItem, index) {
       arrayItem.addEventListener("change", function() {
         state.change({
@@ -470,7 +477,8 @@ var control = (function() {
 
   var update = function() {
     helper.e(".control-edit").checked = state.get().edit.active;
-    helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme);
+    helper.e(".control-layout-theme").value = helper.rgbToHex(state.get().layout.theme.current);
+    helper.e(".control-layout-theme-random").checked = state.get().layout.theme.random;
     helper.e(".control-link-new-tab").value = state.get().link.style.newTab;
     helper.e(".control-link-style-" + state.get().link.style).checked = true;
     helper.e(".control-link-sort-" + state.get().link.sort).checked = true;

js/helper.js

@@ -296,6 +296,10 @@ var helper = (function() {
     });
   };
 
+  var randomNumber = function(min, max) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  };
+
   // exposed methods
   return {
     e: e,
@@ -314,7 +318,8 @@ var helper = (function() {
     makeNode: makeNode,
     setObject: setObject,
     getObject: getObject,
-    makeObject: makeObject
+    makeObject: makeObject,
+    randomNumber: randomNumber
   };
 
 })();

js/state.js

@@ -64,9 +64,12 @@ var state = (function() {
       container: "wide",
       scrollPastEnd: true,
       theme: {
-        r: 0,
-        g: 255,
-        b: 0,
+        current: {
+          r: 0,
+          g: 255,
+          b: 0,
+        },
+        random: false
       },
     },
     edit: {

js/theme.js

@@ -2,17 +2,33 @@ var theme = (function() {
 
   var render = function() {
     var html = helper.e("html");
-    var color = state.get().layout.theme;
+    var color = state.get().layout.theme.current;
     html.style.setProperty("--accent", color.r + ", " + color.g + ", " + color.b);
   };
 
+  var random = function() {
+    if (state.get().layout.theme.random) {
+      var randomColor = {
+        r: helper.randomNumber(0, 255),
+        g: helper.randomNumber(0, 255),
+        b: helper.randomNumber(0, 255)
+      };
+      state.change({
+        path: "layout.theme.current",
+        value: randomColor
+      });
+    };
+  };
+
   var init = function() {
+    random();
     render();
   };
 
   // exposed methods
   return {
     init: init,
+    random: random,
     render: render
   };
 

js/update.js

@@ -23,6 +23,15 @@ var update = (function() {
     return data;
   };
 
+  var _update_210 = function(data) {
+    data.state.layout.theme = {
+      current: data.state.layout.theme,
+      random: false
+    };
+    data.version = 2.10;
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -37,6 +46,10 @@ var update = (function() {
       console.log("\trunning update", 2.00);
       data = _update_200(data);
     };
+    if (data.version < 2.10) {
+      console.log("\trunning update", 2.10);
+      data = _update_210(data);
+    };
     // if (data.version < 3.00) {
     //   console.log("\t# running update", 3.00);
     //   data = _update_300(data);

js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "2.0.0";
+  var current = "2.1.0";
 
   var get = function() {
     var number = current.split(".");