[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>
+<divclass="input-wrap">
+<labelfor="control-theme-color-contrast-light">Light shade contrast</label>
+<divclass="form-group form-group-block mb-0">
+<inputid="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">
+<divclass="control-theme-color-contrast-light-count form-group-text form-group-item-medium form-group-radius-left"></div>
+</div>
+</div>
+<divclass="button-wrap">
+<buttonclass="control-theme-color-contrast-light-default button mb-0" tabindex="-1">Default light shade contrast</button>
+</div>
+<divclass="input-wrap">
+<labelfor="control-theme-color-contrast-dark">Dark shade contrast</label>
+<divclass="form-group form-group-block mb-0">
+<inputid="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">
+<divclass="control-theme-color-contrast-dark-count form-group-text form-group-item-medium form-group-radius-left"></div>
+</div>
+</div>
+<divclass="button-wrap">
+<buttonclass="control-theme-color-contrast-dark-default button mb-0" tabindex="-1">Default dark shade contrast</button>
+</div>
+<hr>
 <divclass="form-group form-group-block form-group-border form-group-border-theme-color">
 <divclass="form-group-text form-group-text-borderless">
 <divclass="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: {