From c9c7333f18f2b9985e1cee42cca885f207d0d18e Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:07:37 +0000
Subject: [PATCH 1/3] fix: add light theme color for console log

---
 src/ext/content-scripts/entry-userscripts.js | 19 ++++++++++---------
 src/shared/colors.js                         | 20 ++++++++++++++++++++
 2 files changed, 30 insertions(+), 9 deletions(-)
 create mode 100644 src/shared/colors.js

diff --git a/src/ext/content-scripts/entry-userscripts.js b/src/ext/content-scripts/entry-userscripts.js
index e0b0f7fb..5c0f79e7 100644
--- a/src/ext/content-scripts/entry-userscripts.js
+++ b/src/ext/content-scripts/entry-userscripts.js
@@ -1,4 +1,5 @@
 import USAPI from "./api.js";
+import { getColor } from "@shared/colors.js";
 
 // code received from background page will be stored in this variable
 // code referenced again when strict CSPs block initial injection attempt
@@ -62,13 +63,13 @@ ${userscript.code}
 	}
 	const world = injectInto === "content" ? "content" : "page";
 	if (window.self === window.top) {
-		console.info(`Injecting: ${name} %c(js/${world})`, "color: #fff600");
+		console.info(`Injecting: ${name} %c(js/${world})`, getColor("yellow"));
 	} else {
 		console.info(
 			`Injecting: ${name} %c(js/${world})%c - %cframe(${label})(${window.location})`,
-			"color: #fff600",
-			"color: inherit",
-			"color: #006fff",
+			getColor("yellow"),
+			getColor(),
+			getColor("blue"),
 		);
 	}
 	if (world === "page") {
@@ -94,13 +95,13 @@ ${userscript.code}
 
 function injectCSS(name, code) {
 	if (window.self === window.top) {
-		console.info(`Injecting ${name} %c(css)`, "color: #60f36c");
+		console.info(`Injecting ${name} %c(css)`, getColor("green"));
 	} else {
 		console.info(
 			`Injecting ${name} %c(css)%c - %cframe(${label})(${window.location})`,
-			"color: #60f36c",
-			"color: inherit",
-			"color: #006fff",
+			getColor("green"),
+			getColor(),
+			getColor("blue"),
 		);
 	}
 	// Safari lacks full support for tabs.insertCSS
@@ -246,7 +247,7 @@ function listeners() {
 			for (let i = 0; i < data.files.menu.length; i++) {
 				const item = data.files.menu[i];
 				if (item.scriptObject.filename === filename) {
-					console.info(`Injecting ${filename} %c(js)`, "color: #fff600");
+					console.info(`Injecting ${filename} %c(js)`, getColor("yellow"));
 					injectJS(item);
 					return;
 				}
diff --git a/src/shared/colors.js b/src/shared/colors.js
new file mode 100644
index 00000000..a6204eef
--- /dev/null
+++ b/src/shared/colors.js
@@ -0,0 +1,20 @@
+/**
+ * Get theme colors for console log css
+ * @param {string=} color
+ */
+export function getColor(color) {
+	if (!color) return "color: inherit";
+	const isDark = matchMedia("(prefers-color-scheme: dark)").matches;
+	/** @type {string} */
+	let hex;
+	if (color === "blue") {
+		hex = isDark ? "#006fff" : "#317eff";
+	} else if (color === "green") {
+		hex = isDark ? "#60f36c" : "#2bb239";
+	} else if (color === "yellow") {
+		hex = isDark ? "#fff600" : "#b8722c";
+	} else {
+		return "";
+	}
+	return `color: ${hex}`;
+}

From 3469a4f399084c538672f35357f11f8c928b9853 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:25:47 +0000
Subject: [PATCH 2/3] refactor: reduce repetition and simplify syntax

---
 src/shared/colors.js | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/shared/colors.js b/src/shared/colors.js
index a6204eef..4d309cc9 100644
--- a/src/shared/colors.js
+++ b/src/shared/colors.js
@@ -5,16 +5,14 @@
 export function getColor(color) {
 	if (!color) return "color: inherit";
 	const isDark = matchMedia("(prefers-color-scheme: dark)").matches;
-	/** @type {string} */
-	let hex;
-	if (color === "blue") {
-		hex = isDark ? "#006fff" : "#317eff";
-	} else if (color === "green") {
-		hex = isDark ? "#60f36c" : "#2bb239";
-	} else if (color === "yellow") {
-		hex = isDark ? "#fff600" : "#b8722c";
-	} else {
-		return "";
+	const colors = {
+		blue: { dark: "#006fff", light: "#317eff" },
+		green: { dark: "#60f36c", light: "#2bb239" },
+		yellow: { dark: "#fff600", light: "#b8722c" },
+	};
+	if (color in colors) {
+		const hex = isDark ? colors[color].dark : colors[color].light;
+		return `color: ${hex}`;
 	}
-	return `color: ${hex}`;
+	return "";
 }

From 8572b54926c914a89a269cf433547241b6fe2bf4 Mon Sep 17 00:00:00 2001
From: ACTCD <101378590+ACTCD@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:40:37 +0000
Subject: [PATCH 3/3] perf: use media query change event

---
 src/shared/colors.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/shared/colors.js b/src/shared/colors.js
index 4d309cc9..f7162e40 100644
--- a/src/shared/colors.js
+++ b/src/shared/colors.js
@@ -1,10 +1,17 @@
+const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+let isDark = darkModeQuery.matches;
+
+darkModeQuery.addEventListener("change", () => {
+	isDark = darkModeQuery.matches;
+});
+
 /**
  * Get theme colors for console log css
  * @param {string=} color
  */
 export function getColor(color) {
 	if (!color) return "color: inherit";
-	const isDark = matchMedia("(prefers-color-scheme: dark)").matches;
 	const colors = {
 		blue: { dark: "#006fff", light: "#317eff" },
 		green: { dark: "#60f36c", light: "#2bb239" },