[feature] allow hex value for accent colour

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "3.74.2",
+  "version": "3.75.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

src/index.html

@@ -86,8 +86,8 @@
           </div>
           <div class="header-item header-button header-accent">
             <div class="input-wrap input-button input-color-dot input-color-dot-accent py-0">
-              <input id="control-theme-accent-current" class="control-theme-accent-current" type="color" tabindex="1">
+              <input id="control-theme-accent-current-quick" class="control-theme-accent-current-quick" type="color" tabindex="1">
-              <label for="control-theme-accent-current">Accent</label>
+              <label for="control-theme-accent-current-quick">Accent</label>
             </div>
           </div>
           <div class="header-item header-button header-menu">
@@ -105,7 +105,6 @@
 
   </main>
 
-
   <section class="menu" tabindex="-1">
     <div class="menu-area">
 
@@ -965,35 +964,19 @@
         </div>
 
         <div class="menu-content-area menu-content-area-theme is-hidden">
-          <div class="menu-item">
-            <div class="menu-item-header">
-              <h1 class="menu-item-header-text">Style</h1>
-            </div>
-            <div class="menu-item-form">
-              <div class="input-wrap">
-                <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
-                <label for="control-theme-style-dark">Dark</label>
-              </div>
-              <div class="input-wrap">
-                <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
-                <label for="control-theme-style-light">Light</label>
-              </div>
-              <p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
-              <hr>
-              <div class="input-wrap">
-                <label for="control-theme-radius">Radius</label>
-                <input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="-1">
-              </div>
-              <div class="button-wrap">
-                <button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
-              </div>
-            </div>
-          </div>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Accent</h1>
             </div>
             <div class="menu-item-form">
+              <label for="control-theme-accent-current-picker">Colour</label>
+              <div class="input-wrap"><div class="form-group mb-0">
+                  <input id="control-theme-accent-current-picker" class="form-group-item-half control-theme-accent-current-picker mb-0" type="color" value="#000000" tabindex="1">
+                  <input id="control-theme-accent-current-hex" class="form-group-item-half control-theme-accent-current-hex mb-0" type="text" placeholder="Hex code" value="#000000" tabindex="1" maxlength="7">
+                </div>
+              </div>
+              <p class="control-theme-style-light-helper form-helper small">Accent Colour can also be changed from the Header area.</p>
+              <hr>
               <div class="input-wrap">
                 <input id="control-theme-accent-random-active" class="control-theme-accent-random-active" type="checkbox" tabindex="-1">
                 <label for="control-theme-accent-random-active">Random Accent colour on load/refresh</label>
@@ -1025,6 +1008,30 @@
               </div>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Style</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
+                <label for="control-theme-style-dark">Dark</label>
+              </div>
+              <div class="input-wrap">
+                <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
+                <label for="control-theme-style-light">Light</label>
+              </div>
+              <p class="control-theme-style-light-helper form-helper small">Accent Colour and Background Image may need to be changed to best fit the Theme Style.</p>
+              <hr>
+              <div class="input-wrap">
+                <label for="control-theme-radius">Radius</label>
+                <input id="control-theme-radius" class="control-theme-radius" type="range" min="0" max="300" value="0" step="20" tabindex="-1">
+              </div>
+              <div class="button-wrap">
+                <button class="control-theme-radius-default button mb-0" tabindex="-1">Default radius</button>
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="menu-content-area menu-content-area-background is-hidden">

src/js/control.js

@@ -69,11 +69,13 @@ var control = (function() {
       render.class();
     }
   }, {
-    element: helper.e(".control-theme-accent-current"),
+    element: helper.e(".control-theme-accent-current-quick"),
     path: "theme.accent.current",
     type: "color",
     func: function() {
       theme.accent();
+      theme.render.input.picker();
+      theme.render.input.hex();
       link.items();
     }
   }, {
@@ -2016,6 +2018,27 @@ var control = (function() {
       link.mod.accent.rainbow();
       link.items();
     }
+  }, {
+    element: helper.e(".control-theme-accent-current-picker"),
+    path: "theme.accent.current",
+    type: "color",
+    func: function() {
+      theme.accent();
+      theme.render.input.quick();
+      theme.render.input.hex();
+      link.items();
+    }
+  }, {
+    element: helper.e(".control-theme-accent-current-hex"),
+    path: "theme.accent.current",
+    type: "text",
+    valueMod: ["hexTextString"],
+    func: function() {
+      theme.accent();
+      theme.render.input.picker();
+      theme.render.input.quick();
+      link.items();
+    }
   }, {
     element: helper.e(".control-theme-style-dark"),
     path: "theme.style",
@@ -2280,6 +2303,9 @@ var control = (function() {
       },
       float: function(value, object) {
         return value / 100;
+      },
+      hexTextString: function(value, object) {
+        return helper.hexToRgb(value);
       }
     };
     var changeValue = function(object) {
@@ -3066,6 +3092,9 @@ var control = (function() {
       },
       float: function(value, element) {
         return value * 100;
+      },
+      hexTextString: function(value, element) {
+        return helper.rgbToHex(value);
       }
     };
     var setValue = {
@@ -3082,10 +3111,16 @@ var control = (function() {
         })).checked = true;
       },
       text: function(object) {
-        object.element.value = helper.getObject({
+        var newValue = helper.getObject({
           object: state.get(),
           path: object.path
         });
+        if (object.valueMod) {
+          object.valueMod.slice().reverse().forEach(function(arrayItem, index) {
+            newValue = valueMod[arrayItem](newValue, object.element);
+          });
+        };
+        object.element.value = newValue;
       },
       number: function(object) {
         object.element.value = helper.getObject({

src/js/header.js

@@ -135,13 +135,13 @@ var header = (function() {
       var action = {
         box: function() {
           helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
-          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+          helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
           helper.removeClass(helper.e(".control-link-add"), "button-link");
           helper.removeClass(helper.e(".control-menu-open"), "button-link");
         },
         clear: function() {
           helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
-          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+          helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current-quick"), ".input-wrap"), "input-button-link");
           helper.addClass(helper.e(".control-link-add"), "button-link");
           helper.addClass(helper.e(".control-menu-open"), "button-link");
         }

src/js/theme.js

@@ -99,11 +99,25 @@ var theme = (function() {
           path: "theme.accent.current",
           newValue: randomColor
         });
-        helper.e(".control-theme-accent-current").value = helper.rgbToHex(randomColor);
+        helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(randomColor);
+        helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(randomColor);
+        helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(randomColor);
       };
     }
   };
 
+  render.input = {
+    quick: function() {
+      helper.e(".control-theme-accent-current-quick").value = helper.rgbToHex(state.get().theme.accent.current);
+    },
+    picker: function() {
+      helper.e(".control-theme-accent-current-picker").value = helper.rgbToHex(state.get().theme.accent.current);
+    },
+    hex: function() {
+      helper.e(".control-theme-accent-current-hex").value = helper.rgbToHex(state.get().theme.accent.current);
+    }
+  };
+
   var toggle = function() {
     mod.theme.toggle();
     render.theme();

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.74.2";
+  var current = "3.75.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");

src/manifest.json

@@ -2,7 +2,7 @@
   "name": "nightTab",
   "short_name": "nightTab",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
-  "version": "3.74.2",
+  "version": "3.75.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"