[feature] improve initial background colour

gulpfile.js

@@ -154,6 +154,10 @@ const build = {
       .pipe(dest(path.build + '/js', {
         sourcemaps: '.'
       }))
+  },
+  initialBackground: function() {
+    return src(path.src + '/js/initial-background.js')
+      .pipe(dest(path.build + '/js'))
   }
 }
 
@@ -209,8 +213,16 @@ const dev = {
       return src(jsFiles)
         .pipe(dest(path.dev + '/js'))
     })
+  },
+  initialBackground: function() {
+    watch(path.src + '/js/initial-background.js', {
+      ignoreInitial: false
+    }, function() {
+      return src(path.src + '/js/initial-background.js')
+        .pipe(dest(path.dev + '/js'))
+    })
   }
 }
 
-exports.dev = parallel(dev.manifest, dev.html, dev.fonts, dev.icons, dev.css, dev.js)
+exports.dev = parallel(dev.manifest, dev.html, dev.fonts, dev.icons, dev.css, dev.js, dev.initialBackground)
-exports.build = parallel(build.manifest, build.html, build.fonts, build.icons, build.css, build.js)
+exports.build = parallel(build.manifest, build.html, build.fonts, build.icons, build.css, build.js, build.initialBackground)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.65.0",
+  "version": "5.67.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.65.0",
+  "version": "5.67.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/html/menu/content/theme/style.html

@@ -4,16 +4,22 @@
   </div>
   <div class="menu-item-form">
     <div class="form-wrap">
-      <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
+      <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
-      <label for="control-theme-style-dark"><span class="label-icon"></span> Dark</label>
+      <label for="control-theme-style-light"><span class="label-icon"></span> Light mode</label>
     </div>
     <div class="form-wrap">
-      <input id="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
+      <input id="control-theme-style-dark" class="control-theme-style-dark" type="radio" name="control-theme-style" value="dark" tabindex="-1">
-      <label for="control-theme-style-light"><span class="label-icon"></span> Light</label>
+      <label for="control-theme-style-dark"><span class="label-icon"></span> Dark mode</label>
     </div>
     <div class="form-wrap">
       <input id="control-theme-style-system" class="control-theme-style-system" type="radio" name="control-theme-style" value="system" tabindex="-1">
-      <label for="control-theme-style-system"><span class="label-icon"></span> Follow system light or dark</label>
+      <label for="control-theme-style-system">
+        <span class="label-icon"></span>
+        <span class="label-block">
+          <span class="label-block-item">Automatic</span>
+          <span class="label-block-item small muted">Follow the system Light or Dark mode.</span>
+        </span>
+      </label>
     </div>
     <div class="form-wrap">
       <p class="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>

src/index.html

@@ -24,6 +24,8 @@
     }
   </style>
 
+  <script src="js/initial-background.js" async></script>
+
   @@include("./html/link-css.html")
 
 </head>

src/js/initial-background.js

@@ -0,0 +1,15 @@
+// inital check for systems which do not have light or dark mode
+var data = JSON.parse(localStorage.getItem("nightTab"));
+if (window.matchMedia("(prefers-color-scheme:light)").matches) {
+  if (data) {
+    if (data.state.theme.style == "dark") {
+      document.querySelector("html").setAttribute("style", "background-color:rgb(0,0,0)");
+    };
+  };
+} else if (window.matchMedia("(prefers-color-scheme:dark)").matches) {
+  if (data) {
+    if (data.state.theme.style == "light") {
+      document.querySelector("html").setAttribute("style", "background-color:rgb(255,255,255)");
+    };
+  };
+};

src/js/version.js

@@ -1,6 +1,6 @@
 var version = (function() {
 
-  var current = "5.65.0";
+  var current = "5.67.0";
 
   var name = "Jaded Raven";
 

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": "5.65.0",
+  "version": "5.67.0",
   "manifest_version": 2,
   "chrome_url_overrides": {
     "newtab": "index.html"