Merge pull request #828 from quoid/fix-console-log-theme-color

fix: add light theme color for console log

Author: ACTCD

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;
 				}

src/shared/colors.js

@@ -0,0 +1,25 @@
+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 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 "";
+}