Merge pull request #833 from quoid/refactor-console-colors

refactor: use light-dark for console log colors

Author: ACTCD

src/ext/content-scripts/entry-userscripts.js

@@ -1,5 +1,5 @@
 import USAPI from "./api.js";
-import { getColor } from "@shared/colors.js";
+import { colors } 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
@@ -63,13 +63,13 @@ ${userscript.code}
 	}
 	const world = injectInto === "content" ? "content" : "page";
 	if (window.self === window.top) {
-		console.info(`Injecting: ${name} %c(js/${world})`, getColor("yellow"));
+		console.info(`Injecting: ${name} %c(js/${world})`, colors.yellow);
 	} else {
 		console.info(
 			`Injecting: ${name} %c(js/${world})%c - %cframe(${label})(${window.location})`,
-			getColor("yellow"),
-			getColor(),
-			getColor("blue"),
+			colors.yellow,
+			colors.inherit,
+			colors.blue,
 		);
 	}
 	if (world === "page") {
@@ -95,13 +95,13 @@ ${userscript.code}
 
 function injectCSS(name, code) {
 	if (window.self === window.top) {
-		console.info(`Injecting ${name} %c(css)`, getColor("green"));
+		console.info(`Injecting ${name} %c(css)`, colors.green);
 	} else {
 		console.info(
 			`Injecting ${name} %c(css)%c - %cframe(${label})(${window.location})`,
-			getColor("green"),
-			getColor(),
-			getColor("blue"),
+			colors.green,
+			colors.inherit,
+			colors.blue,
 		);
 	}
 	// Safari lacks full support for tabs.insertCSS
@@ -247,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)`, getColor("yellow"));
+					console.info(`Injecting ${filename} %c(js)`, colors.yellow);
 					injectJS(item);
 					return;
 				}

src/shared/colors.js

@@ -1,25 +1,10 @@
-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
+ * Theme colors for console log css
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/console#styling_console_output}
  */
-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 "";
-}
+export const colors = {
+	inherit: "color: inherit;",
+	blue: "color: light-dark( #317eff, #006fff);",
+	green: "color: light-dark( #2bb239, #60f36c);",
+	yellow: "color: light-dark( #b8722c, #fff600);",
+};