[feature] add theme colour contrast controls

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nighttab",
-  "version": "4.8.3",
+  "version": "4.9.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": {

package.json

@@ -1484,6 +1484,27 @@ <h1 class="menu-item-header-text">Colour</h1>
                 </div>
               </div>
               <hr>
+              <div class="input-wrap">
+                <label for="control-theme-color-contrast-light">Light shade contrast</label>
+                <div class="form-group form-group-block mb-0">
+                  <input id="control-theme-color-contrast-light" class="control-theme-color-contrast-light mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
+                  <div class="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                </div>
+              </div>
+              <div class="button-wrap">
+                <button class="control-theme-color-contrast-light-default button mb-0" tabindex="-1">Default light shade contrast</button>
+              </div>
+              <div class="input-wrap">
+                <label for="control-theme-color-contrast-dark">Dark shade contrast</label>
+                <div class="form-group form-group-block mb-0">
+                  <input id="control-theme-color-contrast-dark" class="control-theme-color-contrast-dark mr-3" type="range" min="100" max="800" value="400" step="10" tabindex="-1">
+                  <div class="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left"></div>
+                </div>
+              </div>
+              <div class="button-wrap">
+                <button class="control-theme-color-contrast-dark-default button mb-0" tabindex="-1">Default dark shade contrast</button>
+              </div>
+              <hr>
               <div class="form-group form-group-block form-group-border form-group-border-theme-color">
                 <div class="form-group-text form-group-text-borderless">
                   <div class="theme-color-box theme-color-neg-10"></div>

src/index.html

@@ -2799,6 +2799,50 @@ var control = (function() {
       render.range.count(this);
       render.update();
     }
+  }, {
+    element: helper.e(".control-theme-color-contrast-light"),
+    path: "theme.color.contrast.light",
+    type: "range",
+    valueMod: ["float"],
+    rangeCountElement: helper.e(".control-theme-color-contrast-light-count"),
+    func: function() {
+      theme.render.color.shade();
+      render.range.count(this);
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-color-contrast-light-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.color.contrast.light", helper.getObject({
+        object: state.get.default(),
+        path: "theme.color.contrast.light"
+      }));
+      theme.render.color.shade();
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-color-contrast-dark"),
+    path: "theme.color.contrast.dark",
+    type: "range",
+    valueMod: ["float"],
+    rangeCountElement: helper.e(".control-theme-color-contrast-dark-count"),
+    func: function() {
+      theme.render.color.shade();
+      render.range.count(this);
+      render.update();
+    }
+  }, {
+    element: helper.e(".control-theme-color-contrast-dark-default"),
+    type: "button",
+    func: function() {
+      mod.setValue("theme.color.contrast.dark", helper.getObject({
+        object: state.get.default(),
+        path: "theme.color.contrast.dark"
+      }));
+      theme.render.color.shade();
+      render.update();
+    }
   }, {
     element: helper.e(".control-theme-accent-current-picker"),
     path: "theme.accent.current",

src/js/control.js

@@ -241,6 +241,10 @@ var state = (function() {
           r: 129,
           g: 138,
           b: 160
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       font: {
@@ -374,6 +378,10 @@ var state = (function() {
           r: 129,
           g: 138,
           b: 160
+        },
+        contrast: {
+          light: 4,
+          dark: 4
         }
       },
       font: {