Change default theme to honor dark/light mode (proginosko#284)

blocked.js

@@ -11,7 +11,7 @@ function processBlockInfo(info) {
 		// Set theme
 		let link = document.getElementById("themeLink");
 		if (link) {
-			link.href = info.theme ? `/themes/${info.theme}.css` : "";
+			link.href = "/themes/" + (info.theme ? `${info.theme}.css` : "default.css");
 		}
 	}
 

common.js

@@ -518,7 +518,7 @@ function createAccessCode(len) {
 function setTheme(theme) {
 	let link = document.getElementById("themeLink");
 	if (link) {
-		link.href = theme ? `/themes/${theme}.css` : "";
+		link.href = "/themes/" + (theme ? `${theme}.css` : "default.css");
 	}
 }
 

content.css

@@ -1,4 +1,4 @@
-/* LeechBlock content CSS style */
+/* LeechBlock content overlay style */
 
 .leechblock-timer {
 	z-index: 2147483647;

options.css

@@ -1,4 +1,4 @@
-/* LeechBlock options CSS style */
+/* LeechBlock options style */
 
 html {
 	overflow-y: scroll;

options.html

@@ -407,6 +407,7 @@
 								<label>Theme:</label>
 								<select id="theme">
 									<option value="">Default</option>
+									<option value="light">Light</option>
 									<option value="dark">Dark</option>
 									<option value="spruce">Spruce</option>
 								</select>

popup.css

@@ -1,4 +1,4 @@
-/* LeechBlock popup CSS style */
+/* LeechBlock popup style */
 
 body {
 	background-color: #fff;

popup.js

@@ -19,7 +19,7 @@ function initializePage() {
 		let theme = options["theme"];
 		let link = document.getElementById("themeLink");
 		if (link) {
-			link.href = theme ? `/themes/${theme}.css` : "";
+			link.href = "/themes/" + (theme ? `${theme}.css` : "default.css");
 		}
 	}
 }

style.css

@@ -1,4 +1,4 @@
-/* LeechBlock CSS style */
+/* LeechBlock blocking/delaying page style */
 
 body {
 	background: #fff;

themes/dark.css

@@ -1,4 +1,4 @@
-/* LeechBlock Dark theme CSS style */
+/* LeechBlock Dark theme style */
 
 body {
 	background: #222;

themes/default.css

@@ -0,0 +1,114 @@
+/* LeechBlock Default theme style */
+
+@media (prefers-color-scheme: dark) {
+
+/* The following should replicate the Dark theme style */
+
+body {
+	background: #222;
+	color: #bbb;
+}
+
+.ui-button {
+	background: #444;
+	color: #bbb;
+	border: 1px solid #666;
+}
+
+.ui-button:focus {
+	background: #444;
+	color: #bbb;
+	border: 1px solid #666;
+}
+
+.ui-button:hover {
+	background: #333;
+	color: #bbb;
+	border: 1px solid #666;
+}
+
+.ui-widget button {
+	background: #444;
+	color: #bbb;
+	border: 1px solid #666;
+}
+
+.ui-widget button:hover:enabled {
+	background: #333;
+}
+
+.ui-widget button:disabled {
+	background: #333;
+	color: #666;
+	border: 1px solid #444;
+}
+
+.ui-widget fieldset, .ui-widget input, .ui-widget select, .ui-widget textarea {
+	background: #222;
+	color: #bbb;
+	border: 1px solid #666;
+}
+
+.ui-widget input:disabled, .ui-widget select:disabled, .ui-widget textarea:disabled {
+	background: #333;
+	color: #666;
+	border: 1px solid #444;
+}
+
+.ui-widget hr {
+	height: 0px;
+	margin: 0px;
+	border-top: none;
+	border-left: none;
+	border-right: none;
+	border-bottom: 1px solid #666;
+}
+
+.ui-widget th, td {
+	border: 1px solid #666;
+}
+
+.ui-widget-header {
+	background: #444;
+	color: #bbb;
+	border: 1px solid #888;
+}
+
+.ui-widget-content {
+	background: #222;
+	color: #bbb;
+	border: 1px solid #888;
+}
+
+.ui-widget.ui-widget-content {
+	border: 1px solid #888;
+}
+
+.ui-tabs .ui-state-default {
+	background: #aaa;
+	border: 1px solid #666;
+}
+
+.ui-tabs .ui-state-default a {
+	color: #000;
+}
+
+.ui-tabs .ui-state-hover {
+	background: #999;
+	border: 1px solid #666;
+}
+
+.ui-tabs .ui-state-active {
+	background: #222;
+	border: 1px solid #666;
+}
+
+.ui-tabs .ui-state-active a {
+	color: #bbb;
+}
+
+#paneAbout {
+	color: #bbb;
+}
+
+}

themes/light.css

@@ -0,0 +1 @@
+/* LeechBlock Light theme style */

themes/spruce.css

@@ -1,4 +1,4 @@
-/* LeechBlock Spruce theme CSS style */
+/* LeechBlock Spruce theme style */
 
 body {
 	background: #031;