[feature] make header shade use custom background colour

Author: zombieFox

package.json

@@ -1,6 +1,6 @@
 {
 "name": "nighttab",
-"version": "3.73.0",
+"version": "3.74.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/css/base.css

@@ -22,11 +22,11 @@ body{
 }
 
 .is-background-color-by-themebody{
-background-color:var(--background-color-theme);
+background-color:rgb(var(--background-color-theme));
 }
 
 .is-background-color-by-custombody{
-background-color:var(--background-color-custom);
+background-color:rgb(var(--background-color-custom));
 }
 
 .is-layout-scrollpastendbody{

src/css/header.css

@@ -52,11 +52,16 @@
 border-radius:calc(var(--theme-radius) *4);
 }
 
-.is-header-shade-style-always .header-shade,
-.is-header-shade-style-scroll .header-shade{
+.is-background-color-by-theme.is-header-shade-style-always .header-shade,
+.is-background-color-by-theme.is-header-shade-style-scroll .header-shade{
 background-color:rgba(var(--header-shade-color),var(--header-shade-opacity));
 }
 
+.is-background-color-by-custom.is-header-shade-style-always .header-shade,
+.is-background-color-by-custom.is-header-shade-style-scroll .header-shade{
+background-color:rgba(var(--background-color-custom),var(--header-shade-opacity));
+}
+
 .header-area{
 padding:calc(var(--layout-gutter) *var(--layout-padding-multiplier));
 position: relative;

src/css/variables.css

@@ -60,7 +60,7 @@
 --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-color-theme:rgb(var(--theme-gray-01));
+--background-color-theme:var(--theme-gray-01);
 --background-color-custom:rgb(0,0,0);
 --background-image: none;
 --background-opacity:1;

src/js/background.js

@@ -71,7 +71,7 @@ var background = (function(){
 
 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+")");
+html.style.setProperty("--background-color-custom",state.get().background.color.custom.r+", "+state.get().background.color.custom.g+", "+state.get().background.color.custom.b);
 };
 
 render.image=function(){

src/js/version.js

@@ -1,7 +1,7 @@
 
 varversion=(function(){
 
-varcurrent="3.73.0";
+varcurrent="3.74.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.73.0",
+"version": "3.74.0",
 "manifest_version": 2,
 "chrome_url_overrides":{
 "newtab": "index.html"