From 52dcc258b90e2a0a870226d4a159ee0a56c123fc Mon Sep 17 00:00:00 2001
From: James Anderson <janderson@rts.edu>
Date: Sun, 26 Feb 2023 16:03:36 -0500
Subject: [PATCH] Change default theme to honor dark/light mode (#284)

---
 blocked.js         |   2 +-
 common.js          |   2 +-
 content.css        |   2 +-
 options.css        |   2 +-
 options.html       |   1 +
 popup.css          |   2 +-
 popup.js           |   2 +-
 style.css          |   2 +-
 themes/dark.css    |   2 +-
 themes/default.css | 114 +++++++++++++++++++++++++++++++++++++++++++++
 themes/light.css   |   1 +
 themes/spruce.css  |   2 +-
 12 files changed, 125 insertions(+), 9 deletions(-)
 create mode 100644 themes/default.css
 create mode 100644 themes/light.css

diff --git a/blocked.js b/blocked.js
index 462bc58..bbfb800 100644
--- a/blocked.js
+++ b/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");
 		}
 	}
 
diff --git a/common.js b/common.js
index 041b81d..7c60713 100644
--- a/common.js
+++ b/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");
 	}
 }
 
diff --git a/content.css b/content.css
index b8d2e17..7ae8842 100644
--- a/content.css
+++ b/content.css
@@ -1,4 +1,4 @@
-/* LeechBlock content CSS style */
+/* LeechBlock content overlay style */
 
 .leechblock-timer {
 	z-index: 2147483647;
diff --git a/options.css b/options.css
index 55ddcd5..7f182ad 100644
--- a/options.css
+++ b/options.css
@@ -1,4 +1,4 @@
-/* LeechBlock options CSS style */
+/* LeechBlock options style */
 
 html {
 	overflow-y: scroll;
diff --git a/options.html b/options.html
index 3a0745f..bfa3dc1 100644
--- a/options.html
+++ b/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>
diff --git a/popup.css b/popup.css
index 781902e..a75974f 100644
--- a/popup.css
+++ b/popup.css
@@ -1,4 +1,4 @@
-/* LeechBlock popup CSS style */
+/* LeechBlock popup style */
 
 body {
 	background-color: #fff;
diff --git a/popup.js b/popup.js
index 1cce9d5..528a497 100644
--- a/popup.js
+++ b/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");
 		}
 	}
 }
diff --git a/style.css b/style.css
index bafb159..f1b5fbb 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-/* LeechBlock CSS style */
+/* LeechBlock blocking/delaying page style */
 
 body {
 	background: #fff;
diff --git a/themes/dark.css b/themes/dark.css
index 472f7be..d5f7ab1 100644
--- a/themes/dark.css
+++ b/themes/dark.css
@@ -1,4 +1,4 @@
-/* LeechBlock Dark theme CSS style */
+/* LeechBlock Dark theme style */
 
 body {
 	background: #222;
diff --git a/themes/default.css b/themes/default.css
new file mode 100644
index 0000000..5ba149d
--- /dev/null
+++ b/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;
+}
+
+}
diff --git a/themes/light.css b/themes/light.css
new file mode 100644
index 0000000..a609b74
--- /dev/null
+++ b/themes/light.css
@@ -0,0 +1 @@
+/* LeechBlock Light theme style */
diff --git a/themes/spruce.css b/themes/spruce.css
index 3393468..ee428db 100644
--- a/themes/spruce.css
+++ b/themes/spruce.css
@@ -1,4 +1,4 @@
-/* LeechBlock Spruce theme CSS style */
+/* LeechBlock Spruce theme style */
 
 body {
 	background: #031;