[feature] add support for system prefered colour scheme

Author: zombieFox

package-lock.json

@@ -1,6 +1,6 @@
 {
 "name": "nightTab",
-"version": "5.14.0",
+"version": "5.15.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

@@ -330,6 +330,60 @@
 --theme-style-text:var(--theme-black);
 }
 
+@media (prefers-color-scheme: light){
+ .is-theme-style-system{
+--theme-color:var(--theme-shade);
+--theme-color-01:var(--theme-shade-positive-10);
+--theme-color-02:var(--theme-shade-positive-09);
+--theme-color-03:var(--theme-shade-positive-08);
+--theme-color-04:var(--theme-shade-positive-07);
+--theme-color-05:var(--theme-shade-positive-06);
+--theme-color-06:var(--theme-shade-positive-05);
+--theme-color-07:var(--theme-shade-positive-04);
+--theme-color-08:var(--theme-shade-positive-03);
+--theme-color-09:var(--theme-shade-positive-02);
+--theme-color-10:var(--theme-shade-positive-01);
+--theme-color-11:var(--theme-shade-negative-01);
+--theme-color-12:var(--theme-shade-negative-02);
+--theme-color-13:var(--theme-shade-negative-03);
+--theme-color-14:var(--theme-shade-negative-04);
+--theme-color-15:var(--theme-shade-negative-05);
+--theme-color-16:var(--theme-shade-negative-06);
+--theme-color-17:var(--theme-shade-negative-07);
+--theme-color-18:var(--theme-shade-negative-08);
+--theme-color-19:var(--theme-shade-negative-09);
+--theme-color-20:var(--theme-shade-negative-10);
+--theme-style-text:var(--theme-black);
+ }
+}
+
+@media (prefers-color-scheme: dark){
+ .is-theme-style-system{
+--theme-color:var(--theme-shade);
+--theme-color-01:var(--theme-shade-negative-10);
+--theme-color-02:var(--theme-shade-negative-09);
+--theme-color-03:var(--theme-shade-negative-08);
+--theme-color-04:var(--theme-shade-negative-07);
+--theme-color-05:var(--theme-shade-negative-06);
+--theme-color-06:var(--theme-shade-negative-05);
+--theme-color-07:var(--theme-shade-negative-04);
+--theme-color-08:var(--theme-shade-negative-03);
+--theme-color-09:var(--theme-shade-negative-02);
+--theme-color-10:var(--theme-shade-negative-01);
+--theme-color-11:var(--theme-shade-positive-01);
+--theme-color-12:var(--theme-shade-positive-02);
+--theme-color-13:var(--theme-shade-positive-03);
+--theme-color-14:var(--theme-shade-positive-04);
+--theme-color-15:var(--theme-shade-positive-05);
+--theme-color-16:var(--theme-shade-positive-06);
+--theme-color-17:var(--theme-shade-positive-07);
+--theme-color-18:var(--theme-shade-positive-08);
+--theme-color-19:var(--theme-shade-positive-09);
+--theme-color-20:var(--theme-shade-positive-10);
+--theme-style-text:var(--theme-white);
+ }
+}
+
 .is-link-style-block{
 /* link */
 --link-item-width:11em;

src/css/variables.css

@@ -11,6 +11,10 @@ <h1 class="menu-item-header-text">Style</h1>
 <inputid="control-theme-style-light" class="control-theme-style-light" type="radio" name="control-theme-style" value="light" tabindex="-1">
 <labelfor="control-theme-style-light"><spanclass="label-icon"></span> Light</label>
 </div>
+<divclass="form-wrap">
+<inputid="control-theme-style-system" class="control-theme-style-system" type="radio" name="control-theme-style" value="system" tabindex="-1">
+<labelfor="control-theme-style-system"><spanclass="label-icon"></span> Follow system light or dark</label>
+</div>
 <divclass="form-helper">
 <pclass="control-theme-style-helper form-helper-item">Flip the colour shades defined by the primary Colour.</p>
 </div>

src/html/menu/content/theme/style.html

@@ -4649,6 +4649,13 @@ var control = (function(){
 func: function(){
 theme.style.light();
 }
+},{
+element: ".control-theme-style-system",
+path: "theme.style",
+type: "radio",
+func: function(){
+theme.style.system();
+}
 }],
 color: [{
 element: ".control-theme-color-rgb-color",

src/js/control.js

@@ -124,7 +124,6 @@ var keyboard = (function(){
 // ctrl+alt+d
 if(event.ctrlKey&&event.altKey&&event.keyCode==68){
 theme.style.toggle();
-control.render.update.control.header();
 control.render.update.control.menu();
 data.save();
 };

src/js/keyboard.js

@@ -137,6 +137,13 @@ var theme = (function(){
 path: "theme.style",
 newValue: "dark"
 });
+},
+system: function(){
+helper.setObject({
+object: state.get.current(),
+path: "theme.style",
+newValue: "system"
+});
 }
 };
 
@@ -1700,11 +1707,19 @@ var theme = (function(){
 varhtml=helper.e("html");
 helper.addClass(html,"is-theme-style-dark");
 helper.removeClass(html,"is-theme-style-light");
+helper.removeClass(html,"is-theme-style-system");
 },
 light: function(){
 varhtml=helper.e("html");
 helper.removeClass(html,"is-theme-style-dark");
 helper.addClass(html,"is-theme-style-light");
+helper.removeClass(html,"is-theme-style-system");
+},
+system: function(){
+varhtml=helper.e("html");
+helper.removeClass(html,"is-theme-style-dark");
+helper.removeClass(html,"is-theme-style-light");
+helper.addClass(html,"is-theme-style-system");
 }
 };
 
@@ -2290,11 +2305,17 @@ var theme = (function(){
 mod.style.light();
 render.style.light();
 },
+system: function(){
+mod.style.system();
+render.style.system();
+},
 check: function(){
 if(state.get.current().theme.style=="dark"){
 style.dark();
 }elseif(state.get.current().theme.style=="light"){
 style.light();
+}elseif(state.get.current().theme.style=="system"){
+style.system();
 };
 },
 toggle: function(){

src/js/theme.js

@@ -1,6 +1,6 @@
 varversion=(function(){
 
-varcurrent="5.14.0";
+varcurrent="5.15.0";
 
 varname="Zonked Tarsier";
 

src/js/version.js

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