[feature] add auto change accent hue control

src/css/link.css

@@ -639,6 +639,10 @@
   transition: color var(--layout-timing-extra-fast);
 }
 
+.is-theme-accent-cycle .link-display-letter {
+  transition: none;
+}
+
 .link-display-icon {
   font-weight: 400;
   font-style: normal;
@@ -646,6 +650,10 @@
   transition: color var(--layout-timing-extra-fast);
 }
 
+.is-theme-accent-cycle .link-display-icon {
+  transition: none;
+}
+
 .is-link-style-block .link-display-letter,
 .is-link-style-list .link-display-letter {
   font-size: var(--link-item-display-letter-size);
@@ -833,22 +841,32 @@
   flex-basis: 30%;
 }
 
-.link-text-dark .link-control-item {
+.link-control-item {
-  color: rgb(var(--theme-black));
+  color: rgb(var(--theme-accent-text));
 }
 
-.link-text-light .link-control-item {
+.link-control-item:focus,
-  color: rgb(var(--theme-white));
+.link-control-item:hover {
+  color: rgb(var(--theme-accent-text));
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
-.link-text-dark .link-control-item.disabled,
+.link-control-item.disabled:focus,
-.link-text-dark .link-control-item:disabled {
+.link-control-item.disabled:hover,
-  color: rgba(var(--theme-black), 0.25);
+.link-control-item:disabled:focus,
+.link-control-item:disabled:hover {
+  color: rgba(var(--theme-accent-text), 0.25);
+  background-color: transparent;
 }
 
-.link-text-light .link-control-item.disabled,
+.link-control-item:active {
-.link-text-light .link-control-item:disabled {
+  color: rgb(var(--theme-accent-text));
-  color: rgba(var(--theme-white), 0.25);
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.link-control-item.disabled,
+.link-control-item:disabled {
+  color: rgb(var(--theme-accent-text), 0.25);
 }
 
 .is-link-orientation-top.is-link-style-list .link-control-item:nth-child(1) {
@@ -883,44 +901,6 @@
   border-bottom-right-radius: var(--theme-radius);
 }
 
-.link-text-dark .link-control-item:focus,
-.link-text-dark .link-control-item:hover {
-  color: rgb(var(--theme-black));
-  background-color: rgba(0, 0, 0, 0.2);
-}
-
-.link-text-light .link-control-item:focus,
-.link-text-light .link-control-item:hover {
-  color: rgb(var(--theme-white));
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.link-text-dark .link-control-item.disabled:focus,
-.link-text-dark .link-control-item.disabled:hover,
-.link-text-dark .link-control-item:disabled:focus,
-.link-text-dark .link-control-item:disabled:hover {
-  color: rgba(var(--theme-black), 0.25);
-  background-color: transparent;
-}
-
-.link-text-light .link-control-item.disabled:focus,
-.link-text-light .link-control-item.disabled:hover,
-.link-text-light .link-control-item:disabled:focus,
-.link-text-light .link-control-item:disabled:hover {
-  color: rgba(var(--theme-white), 0.25);
-  background-color: transparent;
-}
-
-.link-text-dark .link-control-item:active {
-  color: rgb(var(--theme-black));
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.link-text-light .link-control-item:active {
-  color: rgb(var(--theme-white));
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
 .is-link-orientation-top.is-link-style-list .link-control,
 .is-link-orientation-bottom.is-link-style-list .link-control {
   flex-wrap: nowrap;
@@ -983,12 +963,8 @@
   text-overflow: ellipsis;
 }
 
-.link-text-dark .link-url-text {
+.link-url-text {
-  color: rgb(var(--theme-black));
+  color: rgb(var(--theme-accent-text));
-}
-
-.link-text-light .link-url-text {
-  color: rgb(var(--theme-white));
 }
 
 .is-edit.is-link-item-url-show .link-item:focus .link-panel-front,

src/css/shade.css

@@ -10,6 +10,10 @@
   z-index: var(--z-index-shade);
 }
 
+.is-theme-accent-cycle .shade {
+  transition: opacity var(--layout-timing-extra-fast);
+}
+
 .is-edge:not(.is-background-image-show) .shade {
   background-color: rgba(var(--theme-accent), 0.05);
 }

src/css/variables.css

@@ -2,6 +2,7 @@
   /* theme */
   --theme-root-font-size:                               14px;
   --theme-accent:                                       250, 130, 0;
+  --theme-accent-text:                                  var(--theme-black);
   --theme-radius:                                       0.2rem;
   --theme-font-display-name:                            "Fjalla One", sans-serif;
   --theme-font-display-weight:                          400;

src/html/menu/content/background/image.html

@@ -67,7 +67,7 @@
           </div>
         </div>
         <div class="form-wrap">
-          <label for="control-background-image-grayscale-range">Grayscale</label>
+          <label for="control-background-image-grayscale-range">Greyscale</label>
           <div class="form-group form-group-block">
             <input id="control-background-image-grayscale-range" class="control-background-image-grayscale-range mr-3" type="range" value="0" tabindex="-1">
             <input class="control-background-image-grayscale-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">

src/html/menu/content/theme/accent.html

@@ -12,7 +12,7 @@
       </div>
     </div>
     <div class="form-helper">
-      <p class="control-theme-style-light-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
+      <p class="control-theme-accent-rgb-helper form-helper-item">Accent Colour can also be changed from the Header Area.</p>
     </div>
     <hr>
     <div class="form-wrap">
@@ -46,5 +46,36 @@
         </div>
       </div>
     </div>
+    <hr>
+    <div class="form-wrap">
+      <input id="control-theme-accent-cycle-active" class="control-theme-accent-cycle-active" type="checkbox" tabindex="-1">
+      <label for="control-theme-accent-cycle-active"><span class="label-icon"></span> Auto change Accent hue</label>
+    </div>
+    <div class="form-wrap">
+      <div class="form-indent">
+        <div class="form-wrap">
+          <label for="control-theme-accent-cycle-speed-range">Change delay</label>
+          <div class="form-group form-group-block">
+            <input id="control-theme-accent-cycle-speed-range" class="control-theme-accent-cycle-speed-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-theme-accent-cycle-speed-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-theme-accent-cycle-speed-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+        <div class="form-wrap">
+          <label for="control-theme-accent-cycle-step-range">Change steps</label>
+          <div class="form-group form-group-block">
+            <input id="control-theme-accent-cycle-step-range" class="control-theme-accent-cycle-step-range mr-3" type="range" value="0" tabindex="-1">
+            <input class="control-theme-accent-cycle-step-number form-group-item-medium form-group-radius-left" type="number" value="0" tabindex="-1">
+            <button class="control-theme-accent-cycle-step-default button" tabindex="-1" title="Reset to default"><span class="icon-replay"></span></button>
+          </div>
+        </div>
+        <div class="form-helper">
+          <p class="control-theme-accent-cycle-helper form-helper-item">A small delay and small step in Accent hue change may cause performance issues.</p>
+        </div>
+        <div class="form-helper">
+          <p class="control-theme-accent-cycle-helper form-helper-item">Auto change Accent hue will not work when the Accent colour is a grey or black.</p>
+        </div>
+      </div>
+    </div>
   </div>
 </div>

src/js/control.js

@@ -123,7 +123,6 @@ var control = (function() {
     }],
     func: function() {
       theme.render.accent.color();
-      link.groupAndItems();
     }
   }];
 
@@ -5416,7 +5415,6 @@ var control = (function() {
           }],
           func: function() {
             theme.render.accent.color();
-            link.groupAndItems();
           }
         }, {
           element: ".control-theme-accent-rgb-text",
@@ -5434,7 +5432,6 @@ var control = (function() {
           }],
           func: function() {
             theme.render.accent.color();
-            link.groupAndItems();
           }
         }, {
           element: ".control-theme-accent-rgb-default",
@@ -5442,7 +5439,6 @@ var control = (function() {
           func: function() {
             mod.default("theme.accent.rgb");
             theme.render.accent.color();
-            link.groupAndItems();
             render.update.control.header();
             render.update.control.menu();
           }
@@ -5508,7 +5504,105 @@ var control = (function() {
           }],
           func: function() {
             theme.accent.random();
-            link.groupAndItems();
+          }
+        }, {
+          element: ".control-theme-accent-cycle-active",
+          path: "theme.accent.cycle.active",
+          type: "checkbox",
+          func: function() {
+            render.class();
+            render.dependents();
+            theme.bind.accent.cycle.toggle();
+          }
+        }, {
+          element: ".control-theme-accent-cycle-speed-range",
+          path: "theme.accent.cycle.speed",
+          type: "range",
+          valueModify: {
+            min: 100,
+            max: 1000,
+            step: 10
+          },
+          mirrorElement: [{
+            element: ".control-theme-accent-cycle-speed-number",
+            path: "theme.accent.cycle.speed",
+            type: "number"
+          }],
+          func: function() {
+            theme.bind.accent.cycle.remove();
+            theme.bind.accent.cycle.add();
+          }
+        }, {
+          element: ".control-theme-accent-cycle-speed-number",
+          path: "theme.accent.cycle.speed",
+          type: "number",
+          valueModify: {
+            min: 100,
+            max: 1000,
+            step: 10
+          },
+          mirrorElement: [{
+            element: ".control-theme-accent-cycle-speed-range",
+            path: "theme.accent.cycle.speed",
+            type: "number"
+          }],
+          func: function() {
+            theme.bind.accent.cycle.remove();
+            theme.bind.accent.cycle.add();
+          }
+        }, {
+          element: ".control-theme-accent-cycle-speed-default",
+          type: "button",
+          func: function() {
+            mod.default("theme.accent.cycle.speed");
+            theme.bind.accent.cycle.remove();
+            theme.bind.accent.cycle.add();
+            render.update.control.header();
+            render.update.control.menu();
+          }
+        }, {
+          element: ".control-theme-accent-cycle-step-range",
+          path: "theme.accent.cycle.step",
+          type: "range",
+          valueModify: {
+            min: 1,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-theme-accent-cycle-step-number",
+            path: "theme.accent.cycle.step",
+            type: "number"
+          }],
+          func: function() {
+            theme.bind.accent.cycle.remove();
+            theme.bind.accent.cycle.add();
+          }
+        }, {
+          element: ".control-theme-accent-cycle-step-number",
+          path: "theme.accent.cycle.step",
+          type: "number",
+          valueModify: {
+            min: 1,
+            max: 100
+          },
+          mirrorElement: [{
+            element: ".control-theme-accent-cycle-step-range",
+            path: "theme.accent.cycle.step",
+            type: "number"
+          }],
+          func: function() {
+            theme.bind.accent.cycle.remove();
+            theme.bind.accent.cycle.add();
+          }
+        }, {
+          element: ".control-theme-accent-cycle-step-default",
+          type: "button",
+          func: function() {
+            mod.default("theme.accent.cycle.step");
+            render.update.control.header();
+            render.update.control.menu();
+            render.update.control.header();
+            render.update.control.menu();
           }
         }],
         radius: [{
@@ -6621,6 +6715,14 @@ var control = (function() {
           return state.get.current().theme.custom.edit;
         },
         name: "is-theme-custom-edit"
+      }, {
+        remove: [
+          "is-theme-accent-cycle"
+        ],
+        condition: function() {
+          return state.get.current().theme.accent.cycle.active;
+        },
+        name: "is-theme-accent-cycle"
       }, {
         remove: [
           "is-theme-radius"
@@ -7337,7 +7439,35 @@ var control = (function() {
         }
       }, {
         condition: function() {
-          return state.get.current().theme.accent.random.active;
+          return state.get.current().theme.accent.cycle.active;
+        },
+        dependents: function() {
+          return [
+            "[for=control-theme-accent-cycle-speed-range]",
+            ".control-theme-accent-cycle-speed-range",
+            ".control-theme-accent-cycle-speed-range",
+            ".control-theme-accent-cycle-speed-number",
+            ".control-theme-accent-cycle-speed-default",
+            "[for=control-theme-accent-cycle-step-range]",
+            ".control-theme-accent-cycle-step-range",
+            ".control-theme-accent-cycle-step-range",
+            ".control-theme-accent-cycle-step-number",
+            ".control-theme-accent-cycle-step-default",
+            ".control-theme-accent-cycle-helper"
+          ];
+        }
+      }, {
+        condition: function() {
+          return (!state.get.current().theme.accent.cycle.active);
+        },
+        dependents: function() {
+          return [
+            ".control-theme-accent-random-active"
+          ];
+        }
+      }, {
+        condition: function() {
+          return (state.get.current().theme.accent.random.active && !state.get.current().theme.accent.cycle.active);
         },
         dependents: function() {
           return [

src/js/keyboard.js

@@ -186,7 +186,6 @@ var keyboard = (function() {
         theme.accent.random();
         control.render.update.control.header();
         control.render.update.control.menu();
-        link.groupAndItems();
         data.save();
       };
     }, false);

src/js/link.js

@@ -714,18 +714,12 @@ var link = (function() {
       if (stagedLink.link.accent.override) {
         linkItemOptions.attr.push({
           key: "style",
-          value: "--theme-accent: " + stagedLink.link.accent.color.r + ", " + stagedLink.link.accent.color.g + ", " + stagedLink.link.accent.color.b
+          value: "--theme-accent: " + stagedLink.link.accent.color.r + ", " + stagedLink.link.accent.color.g + ", " + stagedLink.link.accent.color.b + ";"
         });
         if (invert(stagedLink.link.accent.color, true) == "#000000") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-dark";
+          linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + " --theme-accent-text: var(--theme-black);"
         } else if (invert(stagedLink.link.accent.color, true) == "#ffffff") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
+          linkItemOptions.attr[1].value = linkItemOptions.attr[1].value + " --theme-accent-text: var(--theme-white);"
-        };
-      } else {
-        if (invert(state.get.current().theme.accent.rgb, true) == "#000000") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-dark";
-        } else if (invert(state.get.current().theme.accent.rgb, true) == "#ffffff") {
-          linkItemOptions.attr[0].value = linkItemOptions.attr[0].value + " link-text-light";
         };
       };
       var linkItem = helper.makeNode(linkItemOptions);

src/js/state.js

@@ -263,6 +263,11 @@ var state = (function() {
         random: {
           active: false,
           style: "any"
+        },
+        cycle: {
+          active: false,
+          speed: 150,
+          step: 10
         }
       },
       color: {
@@ -429,6 +434,10 @@ var state = (function() {
           r: 0,
           g: 80,
           b: 255
+        },
+        cycle: {
+          speed: 150,
+          step: 10
         }
       },
       color: {

src/js/theme.js

@@ -2,6 +2,7 @@ var theme = (function() {
 
   var _timerFontDisplay = null;
   var _timerFontUi = null;
+  var _timerAccentCycle = null;
 
   var stagedThemeCustom = {
     position: {
@@ -33,6 +34,32 @@ var theme = (function() {
     stagedThemeCustom.theme.timestamp = null;
   };
 
+  var bind = {};
+
+  bind.accent = {
+    cycle: {
+      toggle: function() {
+        if (state.get.current().theme.accent.cycle.active) {
+          bind.accent.cycle.add();
+        } else {
+          bind.accent.cycle.remove();
+        };
+      },
+      add: function() {
+        _timerAccentCycle = setInterval(function() {
+          theme.accent.cycle();
+          control.render.update.control.header(control.mod.header[5]);
+          control.render.update.control.menu(control.mod.menu.controls.theme.accent[0]);
+          control.render.update.control.menu(control.mod.menu.controls.theme.accent[1]);
+        }, state.get.current().theme.accent.cycle.speed);
+      },
+      remove: function() {
+        clearInterval(_timerAccentCycle);
+        _timerAccentCycle = null;
+      }
+    }
+  };
+
   var mod = {};
 
   mod.apply = function(data) {
@@ -93,48 +120,47 @@ var theme = (function() {
   mod.accent = {
     random: function() {
       if (state.get.current().theme.accent.random.active) {
-        var randomVal = function(min, max) {
+        var randomValue = function(min, max) {
           return Math.floor(Math.random() * (max - min) + 1) + min;
         };
         var color = {
           any: function() {
             return {
-              h: randomVal(0, 360),
+              h: randomValue(0, 360),
-              s: randomVal(0, 100),
+              s: randomValue(0, 100),
-              l: randomVal(0, 100)
+              l: randomValue(0, 100)
             };
           },
           light: function() {
             return {
-              h: randomVal(0, 360),
+              h: randomValue(0, 360),
-              s: randomVal(50, 90),
+              s: randomValue(50, 90),
-              l: randomVal(50, 90)
+              l: randomValue(50, 90)
             };
           },
           dark: function() {
             return {
-              h: randomVal(0, 360),
+              h: randomValue(0, 360),
-              s: randomVal(10, 50),
+              s: randomValue(10, 50),
-              l: randomVal(10, 50)
+              l: randomValue(10, 50)
             };
           },
           pastel: function() {
             return {
-              h: randomVal(0, 360),
+              h: randomValue(0, 360),
               s: 50,
               l: 80
             };
           },
           saturated: function() {
             return {
-              h: randomVal(0, 360),
+              h: randomValue(0, 360),
               s: 100,
               l: 50
             };
           }
         };
         var rgb = helper.convertColor.hsl.rgb(color[state.get.current().theme.accent.random.style]());
-        var hex = helper.convertColor.rgb.hex(rgb);
         helper.setObject({
           object: state.get.current(),
           path: "theme.accent.rgb",
@@ -145,6 +171,27 @@ var theme = (function() {
           }
         });
       };
+    },
+    cycle: function() {
+      var incrementVal = function(start, end, currentValue) {
+        var newValue = currentValue + state.get.current().theme.accent.cycle.step;
+        if (newValue > end) {
+          newValue = start;
+        };
+        return newValue;
+      };
+      var hsl = helper.convertColor.rgb.hsl(state.get.current().theme.accent.rgb);
+      hsl.h = incrementVal(0, 359, hsl.h);
+      var rgb = helper.convertColor.hsl.rgb(hsl);
+      helper.setObject({
+        object: state.get.current(),
+        path: "theme.accent.rgb",
+        newValue: {
+          r: Math.round(rgb.r),
+          g: Math.round(rgb.g),
+          b: Math.round(rgb.b)
+        }
+      });
     }
   };
 
@@ -1407,6 +1454,12 @@ var theme = (function() {
       var html = helper.e("html");
       var color = state.get.current().theme.accent.rgb;
       html.style.setProperty("--theme-accent", color.r + ", " + color.g + ", " + color.b);
+      html.style.removeProperty("--theme-accent-text");
+      if (invert(state.get.current().theme.accent.rgb, true) == "#000000") {
+        html.style.setProperty("--theme-accent-text", "var(--theme-black)");
+      } else if (invert(state.get.current().theme.accent.rgb, true) == "#ffffff") {
+        html.style.setProperty("--theme-accent-text", "var(--theme-white)");
+      };
     }
   };
 
@@ -1612,7 +1665,6 @@ var theme = (function() {
         render.shade.opacity();
         render.themeMetaTag();
         style.check();
-        link.groupAndItems();
         control.render.update.control.header();
         control.render.update.control.menu();
         control.render.class();
@@ -1707,7 +1759,6 @@ var theme = (function() {
             render.shade.opacity();
             render.themeMetaTag();
             style.check();
-            link.groupAndItems();
             control.render.update.control.header();
             control.render.update.control.menu();
             control.render.class();
@@ -1959,6 +2010,10 @@ var theme = (function() {
     random: function() {
       mod.accent.random();
       render.accent.color();
+    },
+    cycle: function() {
+      mod.accent.cycle();
+      render.accent.color();
     }
   };
 
@@ -2009,6 +2064,7 @@ var theme = (function() {
     mod.color.generated();
     mod.accent.random();
     mod.custom.close();
+    bind.accent.cycle.toggle();
     render.font.load.preset();
     render.font.load.custom.display();
     render.font.load.custom.ui();
@@ -2033,6 +2089,7 @@ var theme = (function() {
   return {
     init: init,
     mod: mod,
+    bind: bind,
     render: render,
     style: style,
     accent: accent,

src/js/update.js

@@ -895,6 +895,11 @@ var update = (function() {
       });
       delete data.state.group.name.show;
       delete data.state.group.openAll.show;
+      data.state.theme.accent.cycle = {
+        active: false,
+        speed: 200,
+        step: 10
+      };
       return data;
     }
   };