[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-theme body {
+  background-color: var(--background-color-theme);
+}
+
+.is-background-color-by-custom body {
+  background-color: var(--background-color-custom);
+}
+
 .is-layout-scrollpastend body {
   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: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
   --layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(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>
 
         <div class="menu-content-area menu-content-area-background is-hidden">
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Colour</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <input id="control-background-color-by-theme" class="control-background-color-by-theme" type="radio" name="control-background-color-by" value="theme" tabindex="-1">
+                <label for="control-background-color-by-theme">Theme background colour</label>
+              </div>
+              <p class="control-background-color-by-theme-helper form-helper small">Background colour defined by the Dark or Light Theme.</p>
+              <div class="input-wrap">
+                <input id="control-background-color-by-custom" class="control-background-color-by-custom" type="radio" name="control-background-color-by" value="custom" tabindex="-1">
+                <label for="control-background-color-by-custom">Custom background colour</label>
+              </div>
+              <div class="form-indent">
+                <div class="input-wrap">
+                  <input id="control-background-color-custom-current" class="control-background-color-custom-current mb-0" type="color" tabindex="1">
+                </div>
+                <p class="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>
           <div class="menu-item">
             <div class="menu-item-header">
               <h1 class="menu-item-header-text">Image</h1>

src/js/background.js

@@ -69,6 +69,11 @@ var background = (function() {
 
   var render = {};
 
+  render.color = function() {
+    var html = 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() {
     var html = helper.e("html");
     if (state.get().background.image.show) {
@@ -209,6 +214,7 @@ var background = (function() {
   };
 
   var init = 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);
+      } else if (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;
       return data;
+    },
+    "3.66.0": function(data) {
+      data.state.background.color = {
+        by: "theme",
+        custom: {
+          r: 0,
+          g: 0,
+          b: 0
+        }
+      };
+      return data;
     }
   };
 

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "3.65.0";
+  var current = "3.66.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.65.0",
+  "version": "3.66.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"