From 6a6f9bb90d777ef3faaac04e676510e0fa6c7d08 Mon Sep 17 00:00:00 2001
From: Bob Fanger <bfanger@gmail.com>
Date: Sun, 24 Sep 2023 11:10:22 +0200
Subject: [PATCH] feat: Detect firefox darkmode for devtools icon

---
 apps/firefox-extension/build.js                    |  3 ++-
 .../src/{panel-icon.svg => panel-icon@dark.svg}    |  0
 apps/firefox-extension/src/panel-icon@light.svg    |  3 +++
 apps/firefox-extension/src/pixi-devtools.ts        | 14 +++++++++++++-
 4 files changed, 18 insertions(+), 2 deletions(-)
 rename apps/firefox-extension/src/{panel-icon.svg => panel-icon@dark.svg} (100%)
 create mode 100644 apps/firefox-extension/src/panel-icon@light.svg

diff --git a/apps/firefox-extension/build.js b/apps/firefox-extension/build.js
index d808d7d..f5cb619 100644
--- a/apps/firefox-extension/build.js
+++ b/apps/firefox-extension/build.js
@@ -24,7 +24,8 @@ for (const file of [
   "pixi-panel.html",
   "icon.png",
   "icon@2x.png",
-  "panel-icon.svg",
+  "panel-icon@light.svg",
+  "panel-icon@dark.svg",
 ]) {
   fs.copyFileSync(path.join(srcDir, file), path.join(outdir, file));
 }
diff --git a/apps/firefox-extension/src/panel-icon.svg b/apps/firefox-extension/src/panel-icon@dark.svg
similarity index 100%
rename from apps/firefox-extension/src/panel-icon.svg
rename to apps/firefox-extension/src/panel-icon@dark.svg
diff --git a/apps/firefox-extension/src/panel-icon@light.svg b/apps/firefox-extension/src/panel-icon@light.svg
new file mode 100644
index 0000000..7ee4acb
--- /dev/null
+++ b/apps/firefox-extension/src/panel-icon@light.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path stroke="rgba(12, 12, 13, 0.8)" d="M7 21V14.5M7 14.5V9C7 5.96243 9.46243 3.5 12.5 3.5C15.5376 3.5 18 5.96243 18 9C18 12.0376 15.5376 14.5 12.5 14.5H7Z" stroke-width="5.5" stroke-linecap="round"/>
+</svg>
diff --git a/apps/firefox-extension/src/pixi-devtools.ts b/apps/firefox-extension/src/pixi-devtools.ts
index 2d57350..cd57be0 100644
--- a/apps/firefox-extension/src/pixi-devtools.ts
+++ b/apps/firefox-extension/src/pixi-devtools.ts
@@ -1 +1,13 @@
-browser.devtools.panels.create("PixiJS", "panel-icon.svg", "pixi-panel.html");
+let iconPath = "";
+// Detect darkmode.
+// This only works when devtools uses the same mode as the browser.
+browser.devtools.inspectedWindow
+  .eval("window.matchMedia('(prefers-color-scheme: dark)').matches")
+  .then((result) => {
+    if (Array.isArray(result)) {
+      iconPath = result[0] ? "panel-icon@dark.svg" : "panel-icon@light.svg";
+    }
+  })
+  .finally(() => {
+    browser.devtools.panels.create("PixiJS", iconPath, "pixi-panel.html");
+  });