diff --git a/src/ext/content-scripts/entry-userscripts.js b/src/ext/content-scripts/entry-userscripts.js index 5c0f79e7..5721dd90 100644 --- a/src/ext/content-scripts/entry-userscripts.js +++ b/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; } diff --git a/src/shared/colors.js b/src/shared/colors.js index f7162e40..73d9001f 100644 --- a/src/shared/colors.js +++ b/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);", +};