Theme option, prevent flash of wrong system theme and other changes

src/app.css

@@ -13,12 +13,19 @@ body {
 	height: 100vh;
 }
 
+/* Prevent flash of light theme colour when in dark */
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: #2B2A33;
+	}
+}
+
 body.t-light {
-	background-color: #fff;
+	background-color: #F9F9FB;
 }
 
 body.t-dark {
-	background-color: #323234;
+	background-color: #2B2A33;
 }
 
 .cntp-iframe {

src/app.js

@@ -1,8 +1,19 @@
 const log = false;
 
-const showCustomPage = opts => {
+const showCustomPage = async opts => {
 	log && console.debug( '[showCustomPage] init', opts );
 
+	if (opts.theme === 'theme') {
+		let browserNTPBackground;
+		try {
+			browserNTPBackground = await browser.theme.getCurrent().then(res => res.colors.ntp_background);
+		} catch {
+			browserNTPBackground = "#F9F9FB"
+		}
+
+		document.body.style.backgroundColor = browserNTPBackground;
+	}
+
 	if ( opts.theme === 'light' ) {
 		document.body.classList.add( 't-light' );
 	}
@@ -49,4 +60,4 @@ const init = _ => {
 		.then( showCustomPage );
 };
 
-init();
+init();

src/manifest.json

@@ -14,7 +14,7 @@
   "applications": {
     "gecko": {
       "id": "custom-new-tab-page@mint.as",
-      "strict_min_version": "57.0"
+      "strict_min_version": "58.0"
     }
   },
   "options_ui": {

src/options.html

@@ -37,6 +37,7 @@
 			<div class="field-theme__inputs">
 				<select class="form__input form__input--select" id="theme">
 					<option value="none">None</option>
+					<option value="theme">From browser theme</option>
 					<option value="light">Light</option>
 					<option value="dark">Dark</option>
 					<option value="custom">Custom</option>