[feature] add background colour controls

Author: zombieFox

src/css/base.css

@@ -8,7 +8,6 @@ html{
 }
 
 body{
-background-color:var(--background);
 color:rgb(var(--theme-style-text));
 font-size:1rem;
 line-height:1.6;
@@ -21,6 +20,14 @@ body{
 transition: background-color var(--layout-timing-extra-fast);
 }
 
+.is-background-color-by-themebody{
+background-color:var(--background-color-theme);
+}
+
+.is-background-color-by-custombody{
+background-color:var(--background-color-custom);
+}
+
 .is-layout-scrollpastendbody{
 margin-bottom:40vh;
 }

src/css/form.css

@@ -311,7 +311,8 @@ input[type="color"]:focus{
 }
 
 input[type="color"][disabled]{
-opacity:0.5;
+opacity:0.25;
+cursor: default;
 }
 
 input[type="color"][disabled]:hover,

src/css/variables.css

@@ -60,7 +60,8 @@
 --layout-shadow-medium:02px4pxrgba(0,0,0,0.1),04px8pxrgba(0,0,0,0.2);
 --layout-shadow-large:03px6pxrgba(0,0,0,0.1),06px12pxrgba(0,0,0,0.2);
 /* background */
---background:rgb(var(--theme-gray-01));
+--background-color-theme:rgb(var(--theme-gray-01));
+--background-color-custom:rgb(0,0,0);
 --background-image: none;
 --background-opacity:1;
 --background-scale:1;

src/index.html

@@ -1026,6 +1026,28 @@ <h1 class="menu-item-header-text">Accent</h1>
 </div>
 
 <divclass="menu-content-area menu-content-area-background is-hidden">
+<divclass="menu-item">
+<divclass="menu-item-header">
+<h1class="menu-item-header-text">Colour</h1>
+</div>
+<divclass="menu-item-form">
+<divclass="input-wrap">
+<inputid="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
+<labelfor="control-background-color-by-theme">Theme background colour</label>
+</div>
+<pclass="control-background-color-by-theme-helper form-helper small">Background colour defined by the Dark or Light Theme.</p>
+<divclass="input-wrap">
+<inputid="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
+<labelfor="control-background-color-by-custom">Custom background colour</label>
+</div>
+<divclass="form-indent">
+<divclass="input-wrap">
+<inputid="control-background-color-custom-current" class="control-background-color-custom-current mb-0" type="color" tabindex="1">
+</div>
+<pclass="control-background-color-theme-helper form-helper small">Take care as some colours may make the Clock, Date and other text unreadable.</p>
+</div>
+</div>
+</div>
 <divclass="menu-item">
 <divclass="menu-item-header">
 <h1class="menu-item-header-text">Image</h1>

src/js/background.js

@@ -69,6 +69,11 @@ var background = (function(){
 
 varrender={};
 
+render.color=function(){
+varhtml=helper.e("html");
+html.style.setProperty("--background-color-custom","rgb("+state.get().background.color.custom.r+", "+state.get().background.color.custom.g+", "+state.get().background.color.custom.b+")");
+};
+
 render.image=function(){
 varhtml=helper.e("html");
 if(state.get().background.image.show){
@@ -209,6 +214,7 @@ var background = (function(){
 };
 
 varinit=function(){
+render.color();
 render.image();
 render.blur();
 render.grayscale();

src/js/control.js

@@ -2097,6 +2097,29 @@ var control = (function(){
 theme.render.accent.color();
 link.items();
 }
+},{
+element: helper.e(".control-background-color-by-theme"),
+path: "background.color.by",
+type: "radio",
+func: function(){
+render.dependents();
+render.class();
+}
+},{
+element: helper.e(".control-background-color-by-custom"),
+path: "background.color.by",
+type: "radio",
+func: function(){
+render.dependents();
+render.class();
+}
+},{
+element: helper.e(".control-background-color-custom-current"),
+path: "background.color.custom",
+type: "color",
+func: function(){
+background.render.color();
+}
 },{
 element: helper.e(".control-background-image-show"),
 path: "background.image.show",
@@ -2492,6 +2515,9 @@ var control = (function(){
 };
 };
 var_background=function(){
+helper.removeClass(html,"is-background-color-by-theme");
+helper.removeClass(html,"is-background-color-by-custom");
+helper.addClass(html,"is-background-color-by-"+state.get().background.color.by);
 if(state.get().background.image.show){
 helper.addClass(html,"is-background-image-show");
 }else{
@@ -3018,6 +3044,13 @@ var control = (function(){
 _disable.input(".control-background-image-url",true);
 _disable.element(".control-background-image-url-helper",true);
 };
+if(state.get().background.color.by=="theme"){
+_disable.input(".control-background-color-custom-current",true);
+_disable.element(".control-background-color-theme-helper",true);
+}elseif(state.get().background.color.by=="custom"){
+_disable.input(".control-background-color-custom-current",false);
+_disable.element(".control-background-color-theme-helper",false);
+};
 };
 _header();
 _edit();

src/js/state.js

@@ -196,6 +196,14 @@ var state = (function(){
 radius: 0.2
 },
 background: {
+color: {
+by: "theme",
+custom: {
+r: 0,
+g: 0,
+b: 0
+}
+},
 image: {
 show: false,
 from: "file",

src/js/update.js

@@ -592,6 +592,17 @@ var update = (function(){
 "3.51.0": function(data){
 data.state.link.add=false;
 returndata;
+},
+"3.66.0": function(data){
+data.state.background.color={
+by: "theme",
+custom: {
+r: 0,
+g: 0,
+b: 0
+}
+};
+returndata;
 }
 };
 

src/js/version.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="3.65.0";
+varcurrent="3.66.0";
 
 varcompare=function(a,b){
 varpa=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.65.0",
+"version": "3.66.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"